import React, {useEffect} from 'react';
import {SafeAreaView} from 'react-native-safe-area-context';
import {Divider, Icon, ListItem, Text} from '@rneui/themed';
import {useDispatch, useSelector} from 'react-redux';
import {fetchCameras, selectAllCameras} from '../cameraSlice';
import {FlatList} from 'react-native';
import {StyleSheet} from 'react-native';

const List = ({navigation}) => {
  const dispatch = useDispatch();
  const cameras = useSelector(selectAllCameras);
  const cameraStatus = useSelector(state => state.cameras.status);
  const error = useSelector(state => state.cameras.error);

  useEffect(() => {
    if (cameraStatus === 'idle') {
      dispatch(fetchCameras());
    }
  }, [cameraStatus, dispatch]);

  let content;

  if (cameraStatus === 'loading') {
    content = <Text>loading</Text>;
  } else if (cameraStatus === 'succeeded') {
    content = (
      <FlatList
        data={cameras}
        keyExtractor={item => item.id}
        renderItem={({item}) => {
          return (
            <ListItem
              bottomDivider
              onPress={() => {
                if (item?.onlineStatus === 1) {
                  navigation.navigate('Camera', {
                    deviceId: item.deviceId,
                    id: item.id,
                  });
                }
              }}>
              <Icon
                name="circle"
                color={item?.onlineStatus === 1 ? '#52c41a' : '#ff4d4f'}
              />
              <ListItem.Content>
                <ListItem.Title>{item?.name}</ListItem.Title>
              </ListItem.Content>
              <ListItem.Chevron />
            </ListItem>
          );
        }}
      />
    );
  } else if (cameraStatus === 'failed') {
    content = <Text>{error}</Text>;
  }

  return (
    <SafeAreaView>
      {/*<Text style={styles.title}>设备列表</Text>*/}
      <Divider />
      {content}
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  title: {
    backgroundColor: '#fff',
    padding: 10,
    fontSize: 20,
    paddingLeft: 26,
  },
});

export default List;