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

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

interface FishCardListProps {
  catchList: Model.FishingLogInfo[];
  isEditing: boolean;
  expandedFishIndex: number[];
  selectedFishIndex: number | null;
  selectedUnitIndex: number | null;
  // selectedConditionIndex: number | null;
  // selectedGearIndex: number | null;
  fishNameOptions: string[];
  unitOptions: string[];
  // conditionOptions: string[];
  // gearOptions: string[];
  onToggleExpanded: (index: number) => void;
  onUpdateCatchItem: (
    index: number,
    field: keyof Model.FishingLogInfo,
    value: string | number
  ) => void;
  setSelectedFishIndex: (index: number | null) => void;
  setSelectedUnitIndex: (index: number | null) => void;
  // setSelectedConditionIndex: (index: number | null) => void;
  // setSelectedGearIndex: (index: number | null) => void;
  onAddNewFish?: () => void;
  onDeleteFish?: (index: number) => void;
}

export const FishCardList: React.FC<FishCardListProps> = ({
  catchList,
  isEditing,
  expandedFishIndex,
  selectedFishIndex,
  selectedUnitIndex,
  // selectedConditionIndex,
  // selectedGearIndex,
  fishNameOptions,
  unitOptions,
  // conditionOptions,
  // gearOptions,
  onToggleExpanded,
  onUpdateCatchItem,
  setSelectedFishIndex,
  setSelectedUnitIndex,
  // setSelectedConditionIndex,
  // setSelectedGearIndex,
  onAddNewFish,
  onDeleteFish,
}) => {
  // Chuyển về logic đơn giản, không animation
  const handleToggleCard = (index: number) => {
    onToggleExpanded(index);
  };

  return (
    <>
      {catchList.map((fish, index) => (
        <View key={index} style={styles.fishCard}>
          {/* Delete + Chevron buttons - always on top, right side, horizontal row */}
          <View
            style={{
              position: "absolute",
              top: 0,
              right: 0,
              zIndex: 9999,
              flexDirection: "row",
              alignItems: "center",
              padding: 8,
              gap: 8,
            }}
            pointerEvents="box-none"
          >
            {isEditing && (
              <TouchableOpacity
                onPress={() => onDeleteFish?.(index)}
                style={{
                  backgroundColor: "#FF3B30",
                  borderRadius: 8,
                  width: 40,
                  height: 40,
                  justifyContent: "center",
                  alignItems: "center",
                  shadowColor: "#000",
                  shadowOpacity: 0.08,
                  shadowRadius: 2,
                  shadowOffset: { width: 0, height: 1 },
                  elevation: 2,
                }}
                hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
                activeOpacity={0.7}
              >
                <IconSymbol name="trash" size={24} color="#fff" />
              </TouchableOpacity>
            )}
            <TouchableOpacity
              onPress={() => handleToggleCard(index)}
              style={{
                backgroundColor: "#007AFF",
                borderRadius: 8,
                width: 40,
                height: 40,
                justifyContent: "center",
                alignItems: "center",
                shadowColor: "#000",
                shadowOpacity: 0.08,
                shadowRadius: 2,
                shadowOffset: { width: 0, height: 1 },
                elevation: 2,
              }}
              hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
              activeOpacity={0.7}
            >
              <IconSymbol
                name={
                  expandedFishIndex.includes(index)
                    ? "chevron.up"
                    : "chevron.down"
                }
                size={24}
                color="#fff"
              />
            </TouchableOpacity>
          </View>

          {/* Header - Only visible when collapsed */}
          {!expandedFishIndex.includes(index) && <FishCardHeader fish={fish} />}

          {/* Form - Only show when expanded */}
          {expandedFishIndex.includes(index) && (
            <FishCardForm
              fish={fish}
              index={index}
              isEditing={isEditing}
              fishNameOptions={fishNameOptions}
              unitOptions={unitOptions}
              // conditionOptions={conditionOptions}
              // gearOptions={gearOptions}
              selectedFishIndex={selectedFishIndex}
              selectedUnitIndex={selectedUnitIndex}
              // selectedConditionIndex={selectedConditionIndex}
              // selectedGearIndex={selectedGearIndex}
              setSelectedFishIndex={setSelectedFishIndex}
              setSelectedUnitIndex={setSelectedUnitIndex}
              // setSelectedConditionIndex={setSelectedConditionIndex}
              // setSelectedGearIndex={setSelectedGearIndex}
              onUpdateCatchItem={onUpdateCatchItem}
            />
          )}
        </View>
      ))}

      {/* Nút thêm loài cá mới - hiển thị khi đang chỉnh sửa */}
      {isEditing && (
        <TouchableOpacity onPress={onAddNewFish} style={styles.addFishButton}>
          <View style={styles.addFishButtonContent}>
            <IconSymbol name="plus" size={24} color="#fff" />
            <Text style={styles.addFishButtonText}>Thêm loài cá</Text>
          </View>
        </TouchableOpacity>
      )}
    </>
  );
};