/* eslint-disable react/no-unstable-nested-components */
/* eslint-disable react-native/no-inline-styles */
import {FlatList, StyleSheet, Text, View} from 'react-native';
import React from 'react';
import {Slot} from '@s20.ai/copilot-camera-sdk/src/types/AOP';
import DisplayMedia from './DisplayMedia';

type Props = {
  slots: Slot[];
};
//TODO actionData fetched for a slot as a postprocessing service is still stateless

const GallerySlotListComponent = (props: Props) => {
  // const [slotData, setSlotData] = useState<GallerySlotData[]>([]);
  // useEffect(() => {
  //   const gallerySlotData: GallerySlotData[] = props.slots.map(slot => {
  //     if (slot.action) {
  //       if (slot.key) {
  //         return {
  //           slotTitle: slot.title,
  //           slotId: slot.slotId,
  //           sourceType: slot.action.sourceType,
  //           actionType: slot.action.captureType,
  //           slotKey: slot.key,
  //           isComplete: slot.isComplete,
  //           usedActionURL: slot.isComplete ? slot.uploadURL : '',
  //         } as GallerySlotData;
  //       }
  //       if (slot.action.sourceType === 'Ricoh') {
  //         return {
  //           slotTitle: slot.title,
  //           slotId: slot.slotId,
  //           sourceType: slot.action.sourceType,
  //           actionType: slot.action.captureType,
  //           isComplete: slot.isComplete,
  //           usedActionURL: slot.isComplete ? slot.uploadURL : '',
  //         } as GallerySlotData;
  //       } else {
  //         return {
  //           slotTitle: slot.title,
  //           slotId: slot.slotId,
  //           sourceType: slot.action.sourceType,
  //           actionType: slot.action.captureType,
  //           isComplete: slot.isComplete,
  //           usedActionURL: slot.isComplete ? slot.uploadURL : '',
  //         } as GallerySlotData;
  //       }
  //     }
  //     return {
  //       slotTitle: slot.title,
  //       slotId: slot.slotId,
  //       slotItems: slot.slotItems,
  //       isComplete: slot.isComplete,
  //       usedActionURL: slot.isComplete ? slot.uploadURL : '',
  //     } as GallerySlotData;
  //   });
  //   setSlotData(gallerySlotData);
  // }, [props.slots]);

  return (
    <FlatList
      style={styles.slotList}
      horizontal
      ItemSeparatorComponent={() => <View style={styles.separator} />}
      ListFooterComponent={() => <View style={styles.separator} />}
      ListHeaderComponent={() => <View style={styles.separator} />}
      data={props.slots}
      keyExtractor={data => data.slotId}
      renderItem={({item}) => {
        return (
          <View style={styles.listItem}>
            <DisplayMedia slot={item} volume={0} size="small" />
            <Text
              style={[
                styles.listItemIndicationText,
                {
                  backgroundColor: item.isComplete ? '#208737' : '#860909',
                },
              ]}>
              {item.title}
            </Text>
          </View>
        );
      }}
    />
  );
};

export default GallerySlotListComponent;

const styles = StyleSheet.create({
  listItem: {
    height: 200,
    aspectRatio: 16 / 9,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#d9d9d9',
    position: 'relative',
  },
  listItemText: {
    fontStyle: 'italic',
    fontSize: 15,
    color: '#222',
  },
  listItemIndicationText: {
    color: 'white',
    fontSize: 13,
    position: 'absolute',
    left: 0,
    bottom: 0,
    paddingHorizontal: 5,
    paddingVertical: 2,
  },
  separator: {
    width: 20,
  },
  slotList: {
    maxHeight: 200,
  },
});