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

export interface DropdownOption {
  label: string;
  value: string;
}

export interface SingleSelectDropdownProps extends ViewProps {
  label?: string;
  disabled?: boolean;
  caption?: string;
  options: DropdownOption[];
  onSelect: (item: DropdownOption) => void;
  selectedValue?: DropdownOption;
  placeholder?: string;
  className?: string;
}

export const SingleSelectDropdown: React.FC<SingleSelectDropdownProps> = ({
  label,
  options,
  disabled = false,
  caption,
  onSelect,
  selectedValue,
  placeholder = 'Select an option',
  className,
  ...restOfProps
}) => {
  const [dropdownVisible, setDropdownVisible] = useState(false);

  const handleSelect = (value: DropdownOption) => {
    onSelect(value);
    setDropdownVisible(false);
  };

  return (
    <View className={classNames('relative', className)} {...restOfProps}>
      {label && (
        <Text className="font-poppins-medium text-medium-small-paragraph mb-2">
          {label}
        </Text>
      )}
      <TouchableOpacity
        activeOpacity={disabled ? 1 : 0.5}
        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' : ''}`
        )}
        onPress={() =>
          !disabled ? setDropdownVisible(!dropdownVisible) : undefined
        }
      >
        <Text
          className={classNames(
            'font-poppins-regular text-medium-small-paragraph',
            `${disabled ? 'text-neutral-700' : ''}`
          )}
        >
          {selectedValue?.label || placeholder}
        </Text>
        {dropdownVisible ? <ChevronUpIcon /> : <ChevronDownIcon />}
      </TouchableOpacity>
      <View className="relative">
        {caption && (
          <View className="flex items-center flex-row mt-2 ml-1">
            <InformationGray height={16} width={16} />
            <Text
              className={`font-poppins-regular text-xs ml-2 text-neutral-700`}
            >
              {caption}
            </Text>
          </View>
        )}

        {dropdownVisible && (
          <View className="absolute top-2 right-0 left-0 bg-white rounded-2xl shadow-md p-2">
            <FlatList
              data={options}
              keyExtractor={(item) => String(item?.value)}
              renderItem={({ item, index }) => (
                <TouchableOpacity
                  onPress={() => handleSelect(item)}
                  className={classNames(
                    'flex p-3 rounded-lg  flex-row items-center w-full',
                    `${selectedValue?.value === item?.value && 'bg-[#F2EEFF]'}`,
                    `${index !== options?.length - 1 ? 'mb-2' : ''}`
                  )}
                >
                  <RadioButton
                    isSelected={selectedValue?.value === item?.value}
                    onSelect={() => handleSelect(item)}
                  />
                  <Text>{item?.label}</Text>
                </TouchableOpacity>
              )}
            />
          </View>
        )}
      </View>
    </View>
  );
};