363 lines
10 KiB
TypeScript
363 lines
10 KiB
TypeScript
import { IconSymbol } from "@/components/ui/icon-symbol";
|
|
import React, { useState } from "react";
|
|
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";
|
|
import { NotesSection } from "./components/NotesSection";
|
|
|
|
interface NetDetailModalProps {
|
|
visible: boolean;
|
|
onClose: () => void;
|
|
netData: Model.FishingLog | null;
|
|
stt?: number;
|
|
}
|
|
|
|
// ---------------------------
|
|
// 🧵 Component Modal
|
|
// ---------------------------
|
|
const NetDetailModal: React.FC<NetDetailModalProps> = ({
|
|
visible,
|
|
onClose,
|
|
netData,
|
|
stt,
|
|
}) => {
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [editableCatchList, setEditableCatchList] = useState<
|
|
Model.FishingLogInfo[]
|
|
>([]);
|
|
const [selectedFishIndex, setSelectedFishIndex] = useState<number | null>(
|
|
null
|
|
);
|
|
const [selectedUnitIndex, setSelectedUnitIndex] = 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
|
|
React.useEffect(() => {
|
|
if (netData?.info) {
|
|
setEditableCatchList(netData.info);
|
|
}
|
|
}, [netData]);
|
|
|
|
// Reset state khi modal đóng
|
|
React.useEffect(() => {
|
|
if (!visible) {
|
|
setExpandedFishIndices([]);
|
|
setSelectedFishIndex(null);
|
|
setSelectedUnitIndex(null);
|
|
// setSelectedConditionIndex(null);
|
|
// setSelectedGearIndex(null);
|
|
setIsEditing(false);
|
|
}
|
|
}, [visible]);
|
|
|
|
// if (!netData) return null;
|
|
|
|
const isCompleted = netData?.status === 2; // ví dụ: status=2 là hoàn thành
|
|
|
|
// Danh sách tên cá có sẵn
|
|
const fishNameOptions = [
|
|
"Cá chim trắng",
|
|
"Cá song đỏ",
|
|
"Cá hồng",
|
|
"Cá nục",
|
|
"Cá ngừ đại dương",
|
|
"Cá mú trắng",
|
|
"Cá hồng phớn",
|
|
"Cá hổ Napoleon",
|
|
"Cá nược",
|
|
"Cá đuối quạt",
|
|
];
|
|
|
|
// Danh sách đơn vị
|
|
const unitOptions = ["kg", "con", "tấn"];
|
|
|
|
// Danh sách tình trạ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);
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setIsEditing(false);
|
|
setEditableCatchList(netData?.info || []);
|
|
};
|
|
|
|
const handleToggleExpanded = (index: number) => {
|
|
setExpandedFishIndices((prev) =>
|
|
prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
|
|
);
|
|
};
|
|
|
|
const updateCatchItem = (
|
|
index: number,
|
|
field: keyof Model.FishingLogInfo,
|
|
value: string | number
|
|
) => {
|
|
setEditableCatchList((prev) =>
|
|
prev.map((item, i) => {
|
|
if (i === index) {
|
|
const updatedItem = { ...item };
|
|
if (
|
|
field === "catch_number" ||
|
|
field === "fish_size" ||
|
|
field === "fish_rarity"
|
|
) {
|
|
updatedItem[field] = Number(value) || 0;
|
|
} else {
|
|
updatedItem[field] = value as never;
|
|
}
|
|
return updatedItem;
|
|
}
|
|
return item;
|
|
})
|
|
);
|
|
};
|
|
|
|
const handleAddNewFish = () => {
|
|
const newFish: Model.FishingLogInfo = {
|
|
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) =>
|
|
item.catch_unit === "kg" ? sum + (item.catch_number ?? 0) : sum,
|
|
0
|
|
);
|
|
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
animationType="slide"
|
|
presentationStyle="pageSheet"
|
|
onRequestClose={onClose}
|
|
>
|
|
<View style={styles.container}>
|
|
{/* Header */}
|
|
<View style={styles.header}>
|
|
<Text style={styles.title}>Chi tiết mẻ lưới</Text>
|
|
<View style={styles.headerButtons}>
|
|
{isEditing ? (
|
|
<>
|
|
<TouchableOpacity
|
|
onPress={handleCancel}
|
|
style={styles.cancelButton}
|
|
>
|
|
<Text style={styles.cancelButtonText}>Hủy</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={handleSave}
|
|
style={styles.saveButton}
|
|
>
|
|
<Text style={styles.saveButtonText}>Lưu</Text>
|
|
</TouchableOpacity>
|
|
</>
|
|
) : (
|
|
<TouchableOpacity onPress={handleEdit} style={styles.editButton}>
|
|
<View style={styles.editIconButton}>
|
|
<IconSymbol
|
|
name="pencil"
|
|
size={28}
|
|
color="#fff"
|
|
weight="heavy"
|
|
/>
|
|
</View>
|
|
</TouchableOpacity>
|
|
)}
|
|
<TouchableOpacity onPress={onClose} style={styles.closeButton}>
|
|
<View style={styles.closeIconButton}>
|
|
<IconSymbol name="xmark" size={28} color="#fff" />
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Content */}
|
|
<ScrollView style={styles.content}>
|
|
{/* Thông tin chung */}
|
|
{/* <InfoSection
|
|
netData={netData ?? undefined}
|
|
isCompleted={isCompleted}
|
|
stt={stt}
|
|
/> */}
|
|
|
|
{/* Danh sách cá bắt được */}
|
|
<CatchSectionHeader totalCatch={totalCatch} />
|
|
|
|
{/* Fish cards */}
|
|
<FishCardList
|
|
catchList={editableCatchList}
|
|
isEditing={isEditing}
|
|
expandedFishIndex={expandedFishIndices}
|
|
selectedFishIndex={selectedFishIndex}
|
|
selectedUnitIndex={selectedUnitIndex}
|
|
// selectedConditionIndex={selectedConditionIndex}
|
|
// selectedGearIndex={selectedGearIndex}
|
|
fishNameOptions={fishNameOptions}
|
|
unitOptions={unitOptions}
|
|
// conditionOptions={conditionOptions}
|
|
// gearOptions={gearOptions}
|
|
onToggleExpanded={handleToggleExpanded}
|
|
onUpdateCatchItem={updateCatchItem}
|
|
setSelectedFishIndex={setSelectedFishIndex}
|
|
setSelectedUnitIndex={setSelectedUnitIndex}
|
|
// setSelectedConditionIndex={setSelectedConditionIndex}
|
|
// setSelectedGearIndex={setSelectedGearIndex}
|
|
onAddNewFish={handleAddNewFish}
|
|
onDeleteFish={handleDeleteFish}
|
|
/>
|
|
|
|
{/* Ghi chú */}
|
|
<NotesSection ghiChu={netData?.weather_description} />
|
|
</ScrollView>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default NetDetailModal;
|