import React, { useEffect, useState } from 'react';
import { ImageBackground, FlatList, StyleSheet } from 'react-native';
import { TopNavigation, TopNavigationAction, Icon, Card, Layout, Text } from '@ui-kitten/components';
import { rpx } from '../../utils/rpx';
import { apiService } from '../../utils/api';

const BackIcon = (props) => (
  <Icon {...props} name='arrow-back' />
);

const EmptyIcon = (props) => (
  <Icon {...props} name='file-text-outline' width={rpx(100)} height={rpx(100)} fill='#C5CEE0'/>
);

const ExpiredKeysScreen = ({ navigation }) => {
  const [data, setData] = useState([]);

  const navigateBack = () => {
    navigation.goBack();
  };

  const BackAction = () => (
    <TopNavigationAction icon={BackIcon} onPress={navigateBack}/>
  );

  const getExpiredKeys = async () => {
    const res = await apiService.getExpiredKeys();
    setData(res || []);
  };

  const renderItem = ({ item }) => (
    <Card style={styles.card}>
      <Text style={styles.name}>{item.name}  {item.number}</Text>
      <Text style={styles.date}>失效时间：{item.date}</Text>
    </Card>
  );

  useEffect(() => {
    getExpiredKeys();
  }, []);

  return (
    <ImageBackground
      source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uYRs7Cv2Pbp95w3KjGO3' }}
      style={styles.background}
    >
      <TopNavigation
        title='已失效分享'
        alignment='center'
        accessoryLeft={BackAction}
      />
      {data.length > 0 ? (
        <FlatList
          data={data}
          renderItem={renderItem}
          keyExtractor={item => item.id}
          contentContainerStyle={styles.list}
        />
      ) : (
        <Layout style={styles.emptyContainer} level='1'>
          <EmptyIcon />
          <Text category='h5' style={styles.emptyTitle}>暂无失效分享</Text>
          <Text category='s1' style={styles.emptyText}>
            当前没有已失效的分享钥匙记录
          </Text>
        </Layout>
      )}
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  background: {
    flex: 1,
  },
  list: {
    padding: rpx(30),
  },
  card: {
    marginVertical: rpx(20),
    padding: rpx(30),
    borderRadius: rpx(20),
  },
  name: {
    fontSize: rpx(36),
    fontWeight: '700',
    color: '#3D3D3D',
  },
  date: {
    fontSize: rpx(28),
    color: '#808080',
    marginTop: rpx(10),
  },
  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: rpx(40),
    backgroundColor: 'transparent',
  },
  emptyTitle: {
    marginTop: rpx(40),
    marginBottom: rpx(20),
    color: '#3D3D3D',
  },
  emptyText: {
    color: '#8F9BB3',
    textAlign: 'center',
  },
});

export default ExpiredKeysScreen;