SeaGateway-App/components/tripInfo/NetListTable.tsx

import { IconSymbol } from "@/components/ui/icon-symbol";
import { useFishes } from "@/state/use-fish";
import { useTrip } from "@/state/use-trip";
import React, { useEffect, useRef, useState } from "react";
import { Animated, Text, TouchableOpacity, View } from "react-native";
import CreateOrUpdateHaulModal from "./modal/CreateOrUpdateHaulModal";
import styles from "./style/NetListTable.styles";

const NetListTable: React.FC = () => {
  const [collapsed, setCollapsed] = useState(true);
  const [contentHeight, setContentHeight] = useState<number>(0);
  const animatedHeight = useRef(new Animated.Value(0)).current;
  const [modalVisible, setModalVisible] = useState(false);
  const [selectedNet, setSelectedNet] = useState<Model.FishingLog | null>(null);
  const { trip } = useTrip();
  const { fishSpecies, getFishSpecies } = useFishes();
  useEffect(() => {
    getFishSpecies();
  }, []);

  // useEffect(() => {
  //   console.log("Trip thay đổi: ", trip?.fishing_logs?.length);
  // }, [trip]);
  // const data: Model.FishingLog[] = trip?.fishing_logs ?? [];

  const handleToggle = () => {
    const toValue = collapsed ? contentHeight : 0;
    Animated.timing(animatedHeight, {
      toValue,
      duration: 300,
      useNativeDriver: false,
    }).start();
    setCollapsed((prev) => !prev);
  };

  const handleStatusPress = (id: string) => {
    const net = trip?.fishing_logs?.find((item) => item.fishing_log_id === id);
    if (net) {
      setSelectedNet(net);
      setModalVisible(true);
    }
  };

  return (
    <View style={styles.container}>
      {/* Header toggle */}
      <TouchableOpacity
        activeOpacity={0.7}
        onPress={handleToggle}
        style={styles.headerRow}
      >
        <Text style={styles.title}>Danh sách mẻ lưới</Text>
        {collapsed && (
          <Text style={styles.totalCollapsed}>
            {trip?.fishing_logs?.length}
          </Text>
        )}
        <IconSymbol
          name={collapsed ? "chevron.down" : "chevron.up"}
          size={16}
          color="#000"
        />
      </TouchableOpacity>

      {/* Nội dung ẩn để đo chiều cao */}
      <View
        style={{ position: "absolute", opacity: 0, zIndex: -1000 }}
        onLayout={(event) => {
          const height = event.nativeEvent.layout.height;
          // Update measured content height whenever it actually changes.
          if (height > 0 && height !== contentHeight) {
            setContentHeight(height);
            // If the panel is currently expanded, animate to the new height so
            // newly added/removed rows become visible immediately.
            if (!collapsed) {
              Animated.timing(animatedHeight, {
                toValue: height,
                duration: 200,
                useNativeDriver: false,
              }).start();
            }
          }
        }}
      >
        {/* Header */}
        <View style={[styles.row, styles.tableHeader]}>
          <Text style={[styles.sttCell, styles.headerText]}>STT</Text>
          <Text style={[styles.cell, styles.headerText]}>Trạng thái</Text>
        </View>

        {/* Body */}
        {trip?.fishing_logs?.map((item, index) => (
          <View key={item.fishing_log_id} style={styles.row}>
            {/* Cột STT */}
            <Text style={styles.sttCell}>Mẻ {index + 1}</Text>

            {/* Cột Trạng thái */}
            <View style={[styles.cell, styles.statusContainer]}>
              <View
                style={[
                  styles.statusDot,
                  { backgroundColor: item.status ? "#2ecc71" : "#FFD600" },
                ]}
              />
              <TouchableOpacity
                onPress={() => handleStatusPress(item.fishing_log_id)}
              >
                <Text style={styles.statusText}>
                  {item.status ? "Đã hoàn thành" : "Chưa hoàn thành"}
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        ))}
      </View>

      {/* Bảng hiển thị với animation */}
      <Animated.View style={{ height: animatedHeight, overflow: "hidden" }}>
        {/* Header */}
        <View style={[styles.row, styles.tableHeader]}>
          <Text style={[styles.sttCell, styles.headerText]}>STT</Text>
          <Text style={[styles.cell, styles.headerText]}>Trạng thái</Text>
        </View>

        {/* Body */}
        {trip?.fishing_logs?.map((item, index) => (
          <View key={item.fishing_log_id} style={styles.row}>
            {/* Cột STT */}
            <Text style={styles.sttCell}>Mẻ {index + 1}</Text>

            {/* Cột Trạng thái */}
            <View style={[styles.cell, styles.statusContainer]}>
              <View
                style={[
                  styles.statusDot,
                  { backgroundColor: item.status ? "#2ecc71" : "#FFD600" },
                ]}
              />
              <TouchableOpacity
                onPress={() => handleStatusPress(item.fishing_log_id)}
              >
                <Text style={styles.statusText}>
                  {item.status ? "Đã hoàn thành" : "Chưa hoàn thành"}
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        ))}
      </Animated.View>
      <CreateOrUpdateHaulModal
        isVisible={modalVisible}
        onClose={() => {
          console.log("OnCLose");
          setModalVisible(false);
        }}
        fishingLog={selectedNet}
        fishingLogIndex={
          selectedNet
            ? trip!.fishing_logs!.findIndex(
                (item) => item.fishing_log_id === selectedNet.fishing_log_id
              ) + 1
            : undefined
        }
      />
      {/* Modal chi tiết */}
      {/* <NetDetailModal
        visible={modalVisible}
        onClose={() => {
          console.log("OnCLose");
          setModalVisible(false);
        }}
        netData={selectedNet}
      /> */}
    </View>
  );
};

export default NetListTable;