/* eslint-disable react/no-unstable-nested-components */
import {FlatList, SafeAreaView, StyleSheet, Text, View} from 'react-native';
import React from 'react';

import Circle from '../default/Circle';
import GallerySlotListComponent from './GallerySlotListComponent';
import {Step} from '@s20.ai/copilot-camera-sdk/src/types/AOP';

type Props = {
  steps: Step[];
};

const Gallery = (props: Props) => {
  return (
    <SafeAreaView style={styles.root}>
      <FlatList
        data={props.steps}
        keyExtractor={data => data.stepId}
        ListHeaderComponent={() => <View style={styles.separator} />}
        ListFooterComponent={() => <View style={styles.separator} />}
        ItemSeparatorComponent={() => <View style={styles.separator} />}
        renderItem={({item}) => {
          return (
            <View>
              <View style={styles.listTextSection}>
                <Text style={styles.listItemText}>{item.title}</Text>
                <Circle
                  radius={15}
                  backgroundColor={item.isComplete ? '#208737' : '#860909'}
                />
              </View>
              <GallerySlotListComponent slots={item.slots} />
            </View>
          );
        }}
      />
    </SafeAreaView>
  );
};

export default Gallery;

const styles = StyleSheet.create({
  root: {
    flex: 1,
    position: 'relative',
    alignItems: 'center',
    justifyContent: 'space-evenly',
    backgroundColor: 'white',
  },

  separator: {
    height: 40,
  },
  listTextSection: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    marginLeft: 20,
    marginBottom: 10,
  },
  listItemText: {
    fontStyle: 'italic',
    fontSize: 15,
    marginRight: 10,
    color: 'black',
  },
});