import { FontAwesome } from '@expo/vector-icons';
import React, { FC } from 'react';
import { TouchableOpacity, View, Text, ScrollView, FlatList } from 'react-native';

import Modal from './Modal';

type props = {
  items: any[];
  title: string;
  isVisible: boolean;
  setIsVisible: (value: boolean) => void;
  selected?: any;
  setSelected: (value: any) => void;
  itemGetter: (item: any) => string;
  fullHeight?: boolean;
  showCheck?: boolean;
};

const SelectModal: FC<props> = ({
  items,
  title,
  itemGetter,
  isVisible,
  setIsVisible,
  selected,
  setSelected,
  fullHeight,
}) => (
  <Modal
    title={title}
    isVisible={isVisible}
    setIsVisible={setIsVisible}
    classNames={`flex${fullHeight ? '-1' : ''}`}
  >
    <View className={`flex${fullHeight ? '-1' : ''} divide-y`}>
      {fullHeight ? (
        <FlatList
          data={items}
          keyExtractor={(item, index) => `${item.id}-${index}`}
          renderItem={({ item, index }) => (
            <TouchableOpacity
              className="flex"
              key={index}
              onPress={() => {
                setIsVisible(false);
                setSelected(item);
              }}
            >
              <View className="my-2 flex-row items-center justify-between space-x-2">
                <Text className="w-[90%]">{itemGetter(item)}</Text>
                {selected && itemGetter(item) === itemGetter(selected) && (
                  <Text className="mr-3 text-secondary">
                    <FontAwesome name="check" size={14} className="ml-2" />
                  </Text>
                )}
              </View>
            </TouchableOpacity>
          )}
        />
      ) : (
        <ScrollView>
          {items?.map((item, index) => (
            <TouchableOpacity
              className="flex"
              key={index}
              onPress={() => {
                setIsVisible(false);
                setSelected(item);
              }}
            >
              <View className="my-2 flex-row items-center justify-between space-x-2">
                <Text className="w-[90%]">{itemGetter(item)}</Text>
                {selected && itemGetter(item) === itemGetter(selected) && (
                  <Text className="mr-3 text-secondary">
                    <FontAwesome name="check" size={14} className="ml-2" />
                  </Text>
                )}
              </View>
            </TouchableOpacity>
          ))}
        </ScrollView>
      )}
    </View>
  </Modal>
);

export default SelectModal;
