SeaGateway-App/components/tripInfo/CrewListTable.tsx

import { IconSymbol } from "@/components/ui/icon-symbol";
import React, { useRef, useState } from "react";
import { Animated, Text, TouchableOpacity, View } from "react-native";
import CrewDetailModal from "./modal/CrewDetailModal";
import styles from "./style/CrewListTable.styles";

// ---------------------------
// 🧩 Interface
// ---------------------------
interface CrewMember {
  id: string;
  maDinhDanh: string;
  ten: string;
  chucVu: string;
  ngaySinh?: string;
  cccd?: string;
  soDienThoai?: string;
  diaChi?: string;
  ngayVaoLam?: string;
  trinhDoChuyenMon?: string;
  bangCap?: string;
  tinhTrang?: string;
}

// ---------------------------
// ⚓ Dữ liệu mẫu
// ---------------------------
const data: CrewMember[] = [
  {
    id: "10",
    maDinhDanh: "ChuTau",
    ten: "Nguyễn Nhật Minh",
    chucVu: "Chủ tàu",
    ngaySinh: "08/06/2006",
    cccd: "079085012345",
    soDienThoai: "0912345678",
    diaChi: "Hà Nội",
    ngayVaoLam: "",
    trinhDoChuyenMon: "Thuyền trưởng hạng I",
    bangCap: "Bằng thuyền trưởng xa bờ",
    tinhTrang: "Đang làm việc",
  },
  {
    id: "1",
    maDinhDanh: "TV001",
    ten: "Nguyễn Văn A",
    chucVu: "Thuyền trưởng",
    ngaySinh: "20/05/1988",
    cccd: "079088011111",
    soDienThoai: "0901234567",
    diaChi: "456 Đường Cảng, Phường Thanh Khê, Đà Nẵng",
    ngayVaoLam: "15/06/2015",
    trinhDoChuyenMon: "Thuyền trưởng hạng II",
    bangCap: "Bằng thuyền trưởng ven bờ",
    tinhTrang: "Đang làm việc",
  },
  {
    id: "2",
    maDinhDanh: "TV002",
    ten: "Trần Văn B",
    chucVu: "Máy trưởng",
    ngaySinh: "10/08/1990",
    cccd: "079090022222",
    soDienThoai: "0987654321",
    diaChi: "789 Đường Nguyễn Văn Linh, Quận Sơn Trà, Đà Nẵng",
    ngayVaoLam: "20/03/2016",
    trinhDoChuyenMon: "Máy trưởng hạng III",
    bangCap: "Bằng máy trưởng ven bờ",
    tinhTrang: "Đang làm việc",
  },
  {
    id: "3",
    maDinhDanh: "TV003",
    ten: "Lê Văn C",
    chucVu: "Thủy thủ",
    ngaySinh: "25/12/1995",
    cccd: "079095033333",
    soDienThoai: "0976543210",
    diaChi: "321 Đường Hoàng Sa, Quận Ngũ Hành Sơn, Đà Nẵng",
    ngayVaoLam: "10/07/2018",
    trinhDoChuyenMon: "Thủy thủ hạng I",
    bangCap: "Chứng chỉ thủy thủ",
    tinhTrang: "Đang làm việc",
  },
];

const CrewListTable: 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 [selectedCrew, setSelectedCrew] = useState<CrewMember | null>(null);
  const tongThanhVien = data.length;

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

  const handleCrewPress = (crewId: string) => {
    const crew = data.find((item) => item.id === crewId);
    if (crew) {
      setSelectedCrew(crew);
      setModalVisible(true);
    }
  };

  const handleCloseModal = () => {
    setModalVisible(false);
    setSelectedCrew(null);
  };

  return (
    <View style={styles.container}>
      {/* Header toggle */}
      <TouchableOpacity
        activeOpacity={0.7}
        onPress={handleToggle}
        style={styles.headerRow}
      >
        <Text style={styles.title}>Danh sách thuyền viên</Text>
        {collapsed && (
          <Text style={styles.totalCollapsed}>{tongThanhVien}</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;
          if (height > 0 && contentHeight === 0) {
            setContentHeight(height);
          }
        }}
      >
        {/* Header */}
        <View style={[styles.row, styles.tableHeader]}>
          <Text style={[styles.cell, styles.left, styles.headerText]}>
            Mã định danh
          </Text>
          <View style={styles.cellWrapper}>
            <Text style={[styles.cell, styles.headerText]}>Tên</Text>
          </View>
          <Text style={[styles.cell, styles.right, styles.headerText]}>
            Chức vụ
          </Text>
        </View>

        {/* Body */}
        {data.map((item) => (
          <View key={item.id} style={styles.row}>
            <Text style={[styles.cell, styles.left]}>{item.maDinhDanh}</Text>
            <TouchableOpacity
              style={styles.cellWrapper}
              onPress={() => handleCrewPress(item.id)}
            >
              <Text style={[styles.cell, styles.linkText]}>{item.ten}</Text>
            </TouchableOpacity>
            <Text style={[styles.cell, styles.right]}>{item.chucVu}</Text>
          </View>
        ))}

        {/* Footer */}
        <View style={[styles.row]}>
          <Text style={[styles.cell, styles.left, styles.footerText]}>
            Tổng cộng
          </Text>
          <Text style={[styles.cell, styles.footerTotal]}>{tongThanhVien}</Text>
          <Text style={[styles.cell, styles.right]}></Text>
        </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.cell, styles.left, styles.headerText]}>
            Mã định danh
          </Text>
          <View style={styles.cellWrapper}>
            <Text style={[styles.cell, styles.headerText]}>Tên</Text>
          </View>
          <Text style={[styles.cell, styles.right, styles.headerText]}>
            Chức vụ
          </Text>
        </View>

        {/* Body */}
        {data.map((item) => (
          <View key={item.id} style={styles.row}>
            <Text style={[styles.cell, styles.left]}>{item.maDinhDanh}</Text>
            <TouchableOpacity
              style={styles.cellWrapper}
              onPress={() => handleCrewPress(item.id)}
            >
              <Text style={[styles.cell, styles.linkText]}>{item.ten}</Text>
            </TouchableOpacity>
            <Text style={[styles.cell, styles.right]}>{item.chucVu}</Text>
          </View>
        ))}

        {/* Footer */}
        <View style={[styles.row]}>
          <Text style={[styles.cell, styles.left, styles.footerText]}>
            Tổng cộng
          </Text>
          <Text style={[styles.cell, styles.footerTotal]}>{tongThanhVien}</Text>
          <Text style={[styles.cell, styles.right]}></Text>
        </View>
      </Animated.View>

      {/* Modal chi tiết thuyền viên */}
      <CrewDetailModal
        visible={modalVisible}
        onClose={handleCloseModal}
        crewData={selectedCrew}
      />
    </View>
  );
};

export default CrewListTable;