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

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

interface FishCatch {
  fish_species_id: number;
  fish_name: string;
  catch_number: number;
  catch_unit: string;
  fish_size: number;
  fish_rarity: number;
  fish_condition: string;
  gear_usage: string;
}

interface FishCardFormProps {
  fish: FishCatch;
  index: number;
  isEditing: boolean;
  fishNameOptions: string[];
  unitOptions: string[];
  conditionOptions: string[];
  selectedFishIndex: number | null;
  selectedUnitIndex: number | null;
  selectedConditionIndex: number | null;
  setSelectedFishIndex: (index: number | null) => void;
  setSelectedUnitIndex: (index: number | null) => void;
  setSelectedConditionIndex: (index: number | null) => void;
  onUpdateCatchItem: (
    index: number,
    field: keyof FishCatch,
    value: string | number
  ) => void;
}

export const FishCardForm: React.FC<FishCardFormProps> = ({
  fish,
  index,
  isEditing,
  fishNameOptions,
  unitOptions,
  conditionOptions,
  selectedFishIndex,
  selectedUnitIndex,
  selectedConditionIndex,
  setSelectedFishIndex,
  setSelectedUnitIndex,
  setSelectedConditionIndex,
  onUpdateCatchItem,
}) => {
  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={fishNameOptions}
            selectedValue={fish.fish_name}
            isOpen={selectedFishIndex === index}
            onToggle={() =>
              setSelectedFishIndex(selectedFishIndex === index ? null : index)
            }
            onSelect={(value: string) => {
              onUpdateCatchItem(index, "fish_name", value);
              setSelectedFishIndex(null);
            }}
            zIndex={1000 - index}
          />
        ) : (
          <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}>
        <Text style={styles.label}>Ngư cụ sử dụng</Text>
        {isEditing ? (
          <TextInput
            style={styles.input}
            value={fish.gear_usage}
            onChangeText={(value) =>
              onUpdateCatchItem(index, "gear_usage", value)
            }
            placeholder="Nhập ngư cụ..."
          />
        ) : (
          <Text style={styles.infoValue}>{fish.gear_usage || "Không có"}</Text>
        )}
      </View>
    </>
  );
};