import { useThemeColor } from "@/hooks/use-theme-color";
import { FontAwesome5 } from "@expo/vector-icons";
import { useMemo } from "react";
import { Select, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectInput, SelectItem, SelectPortal, SelectTrigger } from "../select";

type SelectOption = {
  label: string;
  value: string;
}
interface CustomSelectProps {
  placeholder?: string;
  options: SelectOption[],
  noneOption?: SelectOption;
  defaultValue?: string;
  selectedValue?:string;
  onValueChange?: (value: string) => void;
  className?: string;
}

const CustomSelect = ({
  options,
  onValueChange,
  defaultValue,
  selectedValue,
  noneOption,
  className,
  placeholder = "Select option"
}: CustomSelectProps) => {
  const optionsComputed = useMemo(() => {
    if(noneOption)
      return [noneOption, ...options];

    return options;
  }, [options, noneOption]);
  const backgroundColor = useThemeColor({ }, "background");
  const metaColor = useThemeColor({}, "meta");

  return (
    <Select className={className} onValueChange={onValueChange} selectedValue={selectedValue} defaultValue={defaultValue}>
      <SelectTrigger className="justify-between" variant="outline" size="md" style={{ backgroundColor }}>
        <SelectInput placeholder={placeholder} />
        <FontAwesome5 style={{color: metaColor}} className="mr-3" name="chevron-down" />
      </SelectTrigger>
      <SelectPortal>
        <SelectBackdrop />
        <SelectContent>
          <SelectDragIndicatorWrapper>
            <SelectDragIndicator />
          </SelectDragIndicatorWrapper>
          {optionsComputed.map((opt, i) => (
            <SelectItem key={i} label={opt.label} value={opt.value} />
          ))}
        </SelectContent>
      </SelectPortal>
    </Select>
  )
}

export default CustomSelect;