update NetDetailModal

components/tripInfo/modal/NetDetailModal/NetDetailModal.tsx

@@ -1,6 +1,13 @@
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import React, { useState } from "react";
-import { Modal, ScrollView, Text, TouchableOpacity, View } from "react-native";
+import {
+  Alert,
+  Modal,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import styles from "../style/NetDetailModal.styles";
 import { CatchSectionHeader } from "./components/CatchSectionHeader";
 import { FishCardList } from "./components/FishCardList";
@@ -57,9 +64,12 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
   const [selectedUnitIndex, setSelectedUnitIndex] = useState<number | null>(
     null
   );
-  const [selectedConditionIndex, setSelectedConditionIndex] = useState<
-    number | null
-  >(null);
+  // const [selectedConditionIndex, setSelectedConditionIndex] = useState<
+  //   number | null
+  // >(null);
+  // const [selectedGearIndex, setSelectedGearIndex] = useState<number | null>(
+  //   null
+  // );
   const [expandedFishIndices, setExpandedFishIndices] = useState<number[]>([]);
 
   // Khởi tạo dữ liệu khi netData thay đổi
@@ -75,7 +85,8 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
       setExpandedFishIndices([]);
       setSelectedFishIndex(null);
       setSelectedUnitIndex(null);
-      setSelectedConditionIndex(null);
+      // setSelectedConditionIndex(null);
+      // setSelectedGearIndex(null);
       setIsEditing(false);
     }
   }, [visible]);
@@ -102,13 +113,97 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
   const unitOptions = ["kg", "con", "tấn"];
 
   // Danh sách tình trạng
-  const conditionOptions = ["Còn sống", "Chết", "Bị thương"];
+  // const conditionOptions = ["Còn sống", "Chết", "Bị thương"];
+
+  // Danh sách ngư cụ
+  // const gearOptions = [
+  //   "Lưới kéo",
+  //   "Lưới vây",
+  //   "Lưới rê",
+  //   "Lưới cào",
+  //   "Lưới lồng",
+  //   "Câu cần",
+  //   "Câu dây",
+  //   "Chài cá",
+  //   "Lồng bẫy",
+  //   "Đăng",
+  // ];
 
   const handleEdit = () => {
     setIsEditing(!isEditing);
   };
 
   const handleSave = () => {
+    // Validate từng cá trong danh sách và thu thập tất cả lỗi
+    const allErrors: { index: number; errors: string[] }[] = [];
+
+    for (let i = 0; i < editableCatchList.length; i++) {
+      const fish = editableCatchList[i];
+      const errors: string[] = [];
+
+      if (!fish.fish_name || fish.fish_name.trim() === "") {
+        errors.push("- Tên loài cá");
+      }
+      if (!fish.catch_number || fish.catch_number <= 0) {
+        errors.push("- Số lượng bắt được");
+      }
+      if (!fish.catch_unit || fish.catch_unit.trim() === "") {
+        errors.push("- Đơn vị");
+      }
+      if (!fish.fish_size || fish.fish_size <= 0) {
+        errors.push("- Kích thước cá");
+      }
+      // if (!fish.fish_condition || fish.fish_condition.trim() === "") {
+      //   errors.push("- Tình trạng cá");
+      // }
+      // if (!fish.gear_usage || fish.gear_usage.trim() === "") {
+      //   errors.push("- Dụng cụ sử dụng");
+      // }
+
+      if (errors.length > 0) {
+        allErrors.push({ index: i, errors });
+      }
+    }
+
+    // Nếu có lỗi, hiển thị tất cả
+    if (allErrors.length > 0) {
+      const errorMessage = allErrors
+        .map((item) => {
+          return `Cá số ${item.index + 1}:\n${item.errors.join("\n")}`;
+        })
+        .join("\n\n");
+
+      Alert.alert(
+        "Thông tin không đầy đủ",
+        errorMessage,
+        [
+          {
+            text: "Tiếp tục chỉnh sửa",
+            onPress: () => {
+              // Mở rộng tất cả các card bị lỗi
+              setExpandedFishIndices((prev) => {
+                const errorIndices = allErrors.map((item) => item.index);
+                const newIndices = [...prev];
+                errorIndices.forEach((idx) => {
+                  if (!newIndices.includes(idx)) {
+                    newIndices.push(idx);
+                  }
+                });
+                return newIndices;
+              });
+            },
+          },
+          {
+            text: "Hủy",
+            onPress: () => {},
+          },
+        ],
+        { cancelable: false }
+      );
+      return;
+    }
+
+    // Nếu validation pass, lưu dữ liệu
     setIsEditing(false);
     console.log("Saved catch list:", editableCatchList);
   };
@@ -149,8 +244,52 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
     );
   };
 
+  const handleAddNewFish = () => {
+    const newFish: FishCatch = {
+      fish_species_id: 0,
+      fish_name: "",
+      catch_number: 0,
+      catch_unit: "kg",
+      fish_size: 0,
+      fish_rarity: 0,
+      fish_condition: "",
+      gear_usage: "",
+    };
+    setEditableCatchList((prev) => [...prev, newFish]);
+    // Tự động expand card mới
+    setExpandedFishIndices((prev) => [...prev, editableCatchList.length]);
+  };
+
+  const handleDeleteFish = (index: number) => {
+    Alert.alert(
+      "Xác nhận xóa",
+      `Bạn có chắc muốn xóa loài cá này?`,
+      [
+        {
+          text: "Hủy",
+          style: "cancel",
+        },
+        {
+          text: "Xóa",
+          style: "destructive",
+          onPress: () => {
+            setEditableCatchList((prev) => prev.filter((_, i) => i !== index));
+            // Cập nhật lại expandedFishIndices sau khi xóa
+            setExpandedFishIndices((prev) =>
+              prev
+                .filter((i) => i !== index)
+                .map((i) => (i > index ? i - 1 : i))
+            );
+          },
+        },
+      ],
+      { cancelable: true }
+    );
+  };
+
+  // Chỉ tính tổng số lượng cá có đơn vị là 'kg'
   const totalCatch = editableCatchList.reduce(
-    (sum, item) => sum + item.catch_number,
+    (sum, item) => (item.catch_unit === "kg" ? sum + item.catch_number : sum),
     0
   );
 
@@ -216,15 +355,20 @@ const NetDetailModal: React.FC<NetDetailModalProps> = ({
             expandedFishIndex={expandedFishIndices}
             selectedFishIndex={selectedFishIndex}
             selectedUnitIndex={selectedUnitIndex}
-            selectedConditionIndex={selectedConditionIndex}
+            // selectedConditionIndex={selectedConditionIndex}
+            // selectedGearIndex={selectedGearIndex}
             fishNameOptions={fishNameOptions}
             unitOptions={unitOptions}
-            conditionOptions={conditionOptions}
+            // conditionOptions={conditionOptions}
+            // gearOptions={gearOptions}
             onToggleExpanded={handleToggleExpanded}
             onUpdateCatchItem={updateCatchItem}
             setSelectedFishIndex={setSelectedFishIndex}
             setSelectedUnitIndex={setSelectedUnitIndex}
-            setSelectedConditionIndex={setSelectedConditionIndex}
+            // setSelectedConditionIndex={setSelectedConditionIndex}
+            // setSelectedGearIndex={setSelectedGearIndex}
+            onAddNewFish={handleAddNewFish}
+            onDeleteFish={handleDeleteFish}
           />
 
           {/* Ghi chú */}