import {
  View,
  Text,
  TouchableOpacity,
  FlatList,
  ViewProps,
} from 'react-native';
import React, { ReactNode, useState } from 'react';
import TickIcon from '../icons/tick.svg';
import { classNames } from '../utils';

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

export interface MenuProps extends ViewProps {
  options: MenuOption[];
  placeholder?: string;
  accessoryLeft?: React.ReactElement | (() => React.ReactElement) | ReactNode;
  selectedItem: MenuOption;
  onSelect: (selectedItem: MenuOption) => void;
  className: string;
}

export const Menu: React.FC<MenuProps> = ({
  placeholder = 'Select an option',
  options,
  accessoryLeft,
  selectedItem,
  onSelect,
  className,
  ...restOfProps
}) => {
  const [dropdownVisible, setDropdownVisible] = useState<boolean>(false);

  const handleToggleDropdown = () => {
    setDropdownVisible(!dropdownVisible);
  };

  const handleItemPress = (item: MenuOption) => {
    onSelect?.(item);
    handleToggleDropdown();
  };

  const renderItem = ({ item, index }: { item: MenuOption; index: number }) => (
    <TouchableOpacity
      className={classNames(
        'rounded-xl p-2',
        `${
          selectedItem?.value === item?.value ? 'bg-brand-50' : 'transparent'
        }`,
        `${index === options?.length - 1 ? 'mb-0' : 'mb-2'}`
      )}
      onPress={() => handleItemPress(item)}
    >
      <Text
        className={classNames(
          'flex-1 rounded-lg text-black font-poppins-regular text-medium-paragraph',
          `${
            selectedItem?.value === item?.value
              ? 'text-brand-500 font-poppins-medium'
              : 'text-black'
          }`
        )}
      >
        {item?.label}
      </Text>
    </TouchableOpacity>
  );

  return (
    <View className={classNames(className)} {...restOfProps}>
      <TouchableOpacity
        onPress={handleToggleDropdown}
        className={classNames(
          'flex items-center flex-row justify-between p-4 rounded-xl ',
          `${dropdownVisible || selectedItem ? 'bg-brand-50' : ''}`
        )}
      >
        {accessoryLeft && (
          <View className="mr-2">
            {typeof accessoryLeft === 'function'
              ? accessoryLeft()
              : accessoryLeft}
          </View>
        )}
        <Text
          className={classNames(
            'flex-1 text-medium-paragraph',
            `${
              selectedItem
                ? 'text-brand-500 font-poppins-medium'
                : 'text-black font-poppins-regular'
            }`
          )}
        >
          {selectedItem ? selectedItem?.label : placeholder}
        </Text>
        <TickIcon />
      </TouchableOpacity>
      {dropdownVisible && (
        <View className=" pl-4 ml-4 mt-2 flex items-start flex-row border-l border-neutral-300">
          <FlatList
            data={options}
            renderItem={renderItem}
            keyExtractor={(item) => item?.value?.toString()}
          />
        </View>
      )}
    </View>
  );
};