SeaGateway-App/components/tripInfo/modal/NetDetailModal/components/FishCardForm.tsx

import { useFishes } from "@/state/use-fish";
import React from "react";
import { Text, TextInput, View } from "react-native";
import styles from "../../style/NetDetailModal.styles";
import { FishSelectDropdown } from "./FishSelectDropdown";

interface FishCardFormProps {
  fish: Model.FishingLogInfo;
  index: number;
  isEditing: boolean;
  fishNameOptions: string[]; // Bỏ gọi API cá
  unitOptions: string[]; // Bỏ render ở trong này
  // conditionOptions: string[];
  // gearOptions: string[];
  selectedFishIndex: number | null;
  selectedUnitIndex: number | null;
  // selectedConditionIndex: number | null;
  // selectedGearIndex: number | null;
  setSelectedFishIndex: (index: number | null) => void;
  setSelectedUnitIndex: (index: number | null) => void;
  // setSelectedConditionIndex: (index: number | null) => void;
  // setSelectedGearIndex: (index: number | null) => void;
  onUpdateCatchItem: (
    index: number,
    field: keyof Model.FishingLogInfo,
    value: string | number
  ) => void;
}

export const FishCardForm: React.FC<FishCardFormProps> = ({
  fish,
  index,
  isEditing,
  unitOptions,
  // conditionOptions,
  // gearOptions,
  selectedFishIndex,
  selectedUnitIndex,
  // selectedConditionIndex,
  // selectedGearIndex,
  setSelectedFishIndex,
  setSelectedUnitIndex,
  // setSelectedConditionIndex,
  // setSelectedGearIndex,
  onUpdateCatchItem,
}) => {
  const { fishSpecies } = useFishes();

  return (
    <>
      {/* Tên cá - Select */}
      <View
        style={[styles.fieldGroup, { zIndex: 1000 - index }, { marginTop: 15 }]}
      >
        <Text style={styles.label}>Tên cá</Text>
        {isEditing ? (
          <FishSelectDropdown
            options={fishSpecies || []}
            selectedFishId={selectedFishIndex}
            isOpen={selectedFishIndex === index}
            onToggle={() =>
              setSelectedFishIndex(selectedFishIndex === index ? null : index)
            }
            onSelect={(value: Model.FishSpeciesResponse) => {
              onUpdateCatchItem(index, "fish_name", value.name);
              setSelectedFishIndex(value.id);
              console.log("Fish Selected: ", fish);
            }}
            zIndex={1000 - index}
            styleOverride={styles.fishNameDropdown}
          />
        ) : (
          <Text style={styles.infoValue}>{fish.fish_name}</Text>
        )}
      </View>

      {/* Số lượng & Đơn vị */}
      <View style={styles.rowGroup}>
        <View style={[styles.fieldGroup, { flex: 1, marginRight: 8 }]}>
          <Text style={styles.label}>Số lượng</Text>
          {isEditing ? (
            <TextInput
              style={styles.input}
              value={String(fish.catch_number)}
              onChangeText={(value) =>
                onUpdateCatchItem(index, "catch_number", value)
              }
              keyboardType="numeric"
              placeholder="0"
            />
          ) : (
            <Text style={styles.infoValue}>{fish.catch_number}</Text>
          )}
        </View>
        <View
          style={[
            styles.fieldGroup,
            { flex: 1, marginLeft: 8, zIndex: 900 - index },
          ]}
        >
          <Text style={styles.label}>Đơn vị</Text>
          {/* {isEditing ? (
            <FishSelectDropdown
              options={unitOptions}
              selectedValue={fish.catch_unit ?? ""}
              isOpen={selectedUnitIndex === index}
              onToggle={() =>
                setSelectedUnitIndex(selectedUnitIndex === index ? null : index)
              }
              onSelect={(value: string) => {
                onUpdateCatchItem(index, "catch_unit", value);
                setSelectedUnitIndex(null);
              }}
              zIndex={900 - index}
            />
          ) : (
            <Text style={styles.infoValue}>{fish.catch_unit}</Text>
          )} */}
        </View>
      </View>

      {/* Kích thước & Độ hiếm */}
      <View style={styles.rowGroup}>
        <View style={[styles.fieldGroup, { flex: 1, marginRight: 8 }]}>
          <Text style={styles.label}>Kích thước (cm)</Text>
          {isEditing ? (
            <TextInput
              style={styles.input}
              value={String(fish.fish_size)}
              onChangeText={(value) =>
                onUpdateCatchItem(index, "fish_size", value)
              }
              keyboardType="numeric"
              placeholder="0"
            />
          ) : (
            <Text style={styles.infoValue}>{fish.fish_size} cm</Text>
          )}
        </View>
        <View style={[styles.fieldGroup, { flex: 1, marginLeft: 8 }]}>
          <Text style={styles.label}>Độ hiếm</Text>
          {isEditing ? (
            <TextInput
              style={styles.input}
              value={String(fish.fish_rarity)}
              onChangeText={(value) =>
                onUpdateCatchItem(index, "fish_rarity", value)
              }
              keyboardType="numeric"
              placeholder="1-5"
            />
          ) : (
            <Text style={styles.infoValue}>{fish.fish_rarity}</Text>
          )}
        </View>
      </View>

      {/* Tình trạng */}
      {/* <View style={[styles.fieldGroup, { zIndex: 800 - index }]}>
        <Text style={styles.label}>Tình trạng</Text>
        {isEditing ? (
          <FishSelectDropdown
            options={conditionOptions}
            selectedValue={fish.fish_condition}
            isOpen={selectedConditionIndex === index}
            onToggle={() =>
              setSelectedConditionIndex(
                selectedConditionIndex === index ? null : index
              )
            }
            onSelect={(value: string) => {
              onUpdateCatchItem(index, "fish_condition", value);
              setSelectedConditionIndex(null);
            }}
            zIndex={800 - index}
            styleOverride={styles.optionsStatusFishList}
          />
        ) : (
          <Text style={styles.infoValue}>{fish.fish_condition}</Text>
        )}
      </View> */}

      {/* Ngư cụ sử dụng */}
      {/* <View style={[styles.fieldGroup, { zIndex: 700 - index }]}>
        <Text style={styles.label}>Ngư cụ sử dụng</Text>
        {isEditing ? (
          <FishSelectDropdown
            options={gearOptions}
            selectedValue={fish.gear_usage}
            isOpen={selectedGearIndex === index}
            onToggle={() =>
              setSelectedGearIndex(selectedGearIndex === index ? null : index)
            }
            onSelect={(value: string) => {
              onUpdateCatchItem(index, "gear_usage", value);
              setSelectedGearIndex(null);
            }}
            zIndex={700 - index}
            styleOverride={styles.optionsStatusFishList}
          />
        ) : (
          <Text style={styles.infoValue}>{fish.gear_usage || "Không có"}</Text>
        )}
      </View> */}
    </>
  );
};