import Checkbox from 'expo-checkbox';
import React, { FC } from 'react';
import { TouchableOpacity, View, Text } from 'react-native';

import { COLOR_SECONDARY } from '../../constants/custom';

type CheckboxListItemProps =
  | {
      label: string;
      value: string;
    }
  | undefined;

type props = {
  items?: CheckboxListItemProps[];
  selected: (item: CheckboxListItemProps) => boolean;
  onPress: (item: CheckboxListItemProps) => void;
  emptyElement?: React.ReactNode;
};

const CheckboxList: FC<props> = ({ items, emptyElement, onPress, selected }) => {
  return (
    <View>
      {items?.length === 0 && emptyElement ? (
        emptyElement
      ) : (
        <View className="px-4">
          {items && items.length > 0 ? (
            <View className="space-y-2">
              {items.map((item, index) => (
                <TouchableOpacity
                  className="flex flex-row"
                  key={index}
                  onPress={() => onPress && onPress(item)}
                >
                  <Checkbox
                    value={selected(item)}
                    onValueChange={() => {
                      onPress && onPress(item);
                    }}
                    color={selected(item) ? COLOR_SECONDARY : undefined}
                  />
                  <Text className="ml-2 text-primary-text">{item?.label}</Text>
                </TouchableOpacity>
              ))}
            </View>
          ) : (
            emptyElement
          )}
        </View>
      )}
    </View>
  );
};

export default CheckboxList;
