import React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { FlatList } from 'react-native';
import ChevronDownIcon from '../icons/chevron-down.svg';
import ChevronUpIcon from '../icons/chevron-up.svg';
import { classNames } from '../utils';
import { Checkbox } from './Checkbox';
import InformationGray from '../icons/information-gray.svg';
import Close from '../icons/close.svg';

export interface MultiSelectDropdownProps {
  label?: string;
  disabled?: boolean;
  caption?: string;
  options: { label: string; value: string | number }[];
  onSelect: (
    selectedValues: { label: string; value: string | number }[]
  ) => void;
  selectedValues?: { label: string; value: string | number }[];
  placeholder?: string;
  showCloseIcon?: boolean;
}

export const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
  label,
  options,
  disabled = false,
  caption,
  onSelect,
  selectedValues = [],
  placeholder = 'Select options',
  showCloseIcon,
}) => {
  const [dropdownVisible, setDropdownVisible] = useState(false);

  const handleSelect = (item: { label: string; value: string | number }) => {
    const updatedValues = selectedValues.some((v) => v?.value === item?.value)
      ? selectedValues.filter((v) => v.value !== item?.value)
      : [...selectedValues, options.find((opt) => opt.value === item?.value)!];
    onSelect(updatedValues);
  };

  return (
    <View className="relative">
      {label && (
        <Text className="font-poppins-medium text-medium-paragraph mb-2">
          {label}
        </Text>
      )}
      <TouchableOpacity
        onPress={() =>
          !disabled ? setDropdownVisible(!dropdownVisible) : undefined
        }
        className={classNames(
          'p-4 rounded-2xl flex flex-row items-center justify-between',
          `${
            dropdownVisible
              ? 'border-brand-500 border-[1.5px]'
              : 'border-neutral-500 border'
          }`,
          `${disabled ? 'bg-neutral-50' : ''}`
        )}
        activeOpacity={disabled ? 1 : 0.5}
      >
        <FlatList
          data={selectedValues}
          horizontal={true}
          ListEmptyComponent={
            <Text
              className={`font-poppins-regular text-medium-paragraph  ${
                disabled ? 'text-neutral-700' : 'text-black'
              }`}
            >
              {placeholder}
            </Text>
          }
          renderItem={({ item }) => (
            <TouchableOpacity
              onPress={() => handleSelect(item)}
              className="bg-brand-50 flex- items-center flex-row rounded-lg px-2 py-1 mr-2"
            >
              <Text className=" font-poppins-medium text-xs text-brand-500">
                {item?.label}
              </Text>
              {showCloseIcon && (
                <View className="ml-2">
                  <Close height={16} width={16} />
                </View>
              )}
            </TouchableOpacity>
          )}
        />
        {dropdownVisible ? <ChevronUpIcon /> : <ChevronDownIcon />}
      </TouchableOpacity>
      <View className="relative">
        {caption && (
          <View className="flex items-center flex-row mt-2 ml-1">
            <InformationGray fill="orange" height={16} width={16} />
            <Text
              className={`font-poppins-regular text-small-paragraph ml-2 text-neutral-700`}
            >
              {caption}
            </Text>
          </View>
        )}
        {dropdownVisible && (
          <View className="absolute top-2 right-0 left-0 h-[180px] bg-white rounded-2xl shadow-md p-2">
            <FlatList
              data={options}
              keyExtractor={(item) => String(item?.value)}
              renderItem={({ item, index }) => (
                <View
                  className={classNames(
                    'flex p-3 rounded-lg  flex-row items-center w-full',
                    `${
                      selectedValues.some((v) => v?.value === item?.value) &&
                      'bg-brand-50'
                    }`,
                    `${index !== options?.length - 1 ? 'mb-2' : ''}`
                  )}
                >
                  <Checkbox
                    onChange={() => handleSelect(item)}
                    checked={selectedValues.some(
                      (v) => v?.value === item?.value
                    )}
                  />
                  <Text className="font-poppins-regular">{item?.label}</Text>
                </View>
              )}
            />
          </View>
        )}
      </View>
    </View>
  );
};