import { IconSymbol } from "@/components/ui/icon-symbol";
import React from "react";
import { ScrollView, Text, TouchableOpacity, View } from "react-native";
import styles from "../../style/NetDetailModal.styles";

interface FishSelectDropdownProps {
  options: Model.FishSpeciesResponse[];
  selectedFishId: number | null;
  isOpen: boolean;
  onToggle: () => void;
  onSelect: (value: Model.FishSpeciesResponse) => void;
  zIndex: number;
  styleOverride?: any;
}

export const FishSelectDropdown: React.FC<FishSelectDropdownProps> = ({
  options,
  selectedFishId,
  isOpen,
  onToggle,
  onSelect,
  zIndex,
  styleOverride,
}) => {
  const dropdownStyle = styleOverride || styles.optionsList;
  const findFishNameById = (id: number | null) => {
    const fish = options.find((item) => item.id === id);
    return fish?.name || "Chọn cá";
  };
  const [selectedFish, setSelectedFish] =
    React.useState<Model.FishSpeciesResponse | null>(null);
  return (
    <View style={{ zIndex }}>
      <TouchableOpacity style={styles.selectButton} onPress={onToggle}>
        <Text style={styles.selectButtonText}>
          {findFishNameById(selectedFishId)}
        </Text>
        <IconSymbol
          name={isOpen ? "chevron.up" : "chevron.down"}
          size={16}
          color="#666"
        />
      </TouchableOpacity>
      {isOpen && (
        <ScrollView style={dropdownStyle} nestedScrollEnabled={true}>
          {options.map((option, optIndex) => (
            <TouchableOpacity
              key={option.id || optIndex}
              style={styles.optionItem}
              onPress={() => onSelect(option)}
            >
              <Text style={styles.optionText}>
                {findFishNameById(option.id)}
              </Text>
            </TouchableOpacity>
          ))}
        </ScrollView>
      )}
    </View>
  );
};
