update style CreateOrUpdateHaulModal

components/tripInfo/modal/CreateOrUpdateHaulModal.tsx

@@ -1,11 +1,20 @@
 import Select from "@/components/Select";
+import { IconSymbol } from "@/components/ui/icon-symbol";
 import { useFishes } from "@/state/use-fish";
 import { zodResolver } from "@hookform/resolvers/zod";
 import React from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
-import { Button, FlatList, Modal, Text, TextInput, View } from "react-native";
+import {
+  Modal,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import { z } from "zod";
 import { InfoSection } from "./NetDetailModal/components";
+import styles from "./style/CreateOrUpdateHaulModal.styles";
 
 interface CreateOrUpdateHaulModalProps {
   isVisible: boolean;
@@ -52,9 +61,13 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
   isVisible,
   onClose,
   fishingLog,
-  fishingLogIndex
+  fishingLogIndex,
 }) => {
   const [isCreateMode, setIsCreateMode] = React.useState(!fishingLog?.info);
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [expandedFishIndices, setExpandedFishIndices] = React.useState<
+    number[]
+  >([]);
   const { control, handleSubmit, formState, watch, reset } =
     useForm<FormValues>({
       resolver: zodResolver(formSchema),
@@ -74,6 +87,12 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
     keyName: "_id", // tránh đụng key
   });
 
+  const handleToggleExpanded = (index: number) => {
+    setExpandedFishIndices((prev) =>
+      prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
+    );
+  };
+
   const onSubmit = (values: FormValues) => {
     // Map form values to the FishingLogInfo-like shape the user requested
     const mapped = values.fish.map((f) => {
@@ -102,6 +121,8 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
       // when modal closed, clear form to default
       reset({ fish: [defaultItem()] });
       setIsCreateMode(true);
+      setIsEditing(false);
+      setExpandedFishIndices([]);
       return;
     }
 
@@ -110,6 +131,8 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
       // explicit null -> start with a single default item
       reset({ fish: [defaultItem()] });
       setIsCreateMode(true);
+      setIsEditing(true); // allow editing for new haul
+      setExpandedFishIndices([0]); // expand first item
     } else if (Array.isArray(fishingLog?.info) && fishingLog?.info.length > 0) {
       // map FishingLogInfo -> form rows
       const mapped = fishingLog.info.map((h) => ({
@@ -120,132 +143,212 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
       }));
       reset({ fish: mapped as any });
       setIsCreateMode(false);
+      setIsEditing(false); // view mode by default
+      setExpandedFishIndices([]); // all collapsed
     } else {
       // undefined or empty array -> default
       reset({ fish: [defaultItem()] });
       setIsCreateMode(true);
+      setIsEditing(true); // allow editing for new haul
+      setExpandedFishIndices([0]); // expand first item
     }
   }, [isVisible, fishingLog?.info, reset]);
-  const renderRow = ({ item, index }: { item: any; index: number }) => {
+  const renderRow = (item: any, index: number) => {
+    const isExpanded = expandedFishIndices.includes(index);
+
     return (
-      <View
-        style={{
-          marginBottom: 12,
-          padding: 12,
-          borderWidth: 1,
-          borderRadius: 8,
-        }}
-      >
-        <Text style={{ fontWeight: "600", marginBottom: 8 }}>
-          Loài cá #{index + 1}
-        </Text>
-
-        {/* Species dropdown */}
-        <Controller
-          control={control}
-          name={`fish.${index}.id`}
-          render={({ field: { value, onChange } }) => (
-            <View style={{ marginBottom: 8 }}>
-              <Text style={{ marginBottom: 4 }}>Tên cá</Text>
-              <Select
-                options={fishSpecies!.map((fish) => ({
-                  label: fish.name,
-                  value: fish.id,
-                }))}
-                value={value}
-                onChange={onChange}
-                placeholder="Chọn loài cá"
-              />
-              {errors.fish?.[index]?.id && (
-                <Text style={{ color: "red" }}>
-                  {errors.fish[index]?.id?.message as string}
-                </Text>
-              )}
-            </View>
+      <View key={item._id} style={styles.fishCard}>
+        {/* Delete + Chevron buttons - top right corner */}
+        <View
+          style={{
+            position: "absolute",
+            top: 0,
+            right: 0,
+            zIndex: 9999,
+            flexDirection: "row",
+            alignItems: "center",
+            padding: 8,
+            gap: 8,
+          }}
+          pointerEvents="box-none"
+        >
+          {isEditing && (
+            <TouchableOpacity
+              onPress={() => remove(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>
           )}
-        />
-
-        {/* Quantity */}
-        <Controller
-          control={control}
-          name={`fish.${index}.quantity`}
-          render={({ field: { value, onChange, onBlur } }) => (
-            <View style={{ marginBottom: 8 }}>
-              <Text style={{ marginBottom: 4 }}>Số lượng</Text>
-              <TextInput
-                keyboardType="numeric"
-                value={String(value ?? "")}
-                onBlur={onBlur}
-                onChangeText={(t) =>
-                  onChange(Number(t.replace(/,/g, ".")) || 0)
-                }
-                style={{ padding: 10, borderWidth: 1, borderRadius: 6 }}
-              />
-              {errors.fish?.[index]?.quantity && (
-                <Text style={{ color: "red" }}>
-                  {errors.fish[index]?.quantity?.message as string}
-                </Text>
-              )}
-            </View>
-          )}
-        />
-
-        {/* Unit dropdown */}
-        <Controller
-          control={control}
-          name={`fish.${index}.unit`}
-          render={({ field: { value, onChange } }) => (
-            <View style={{ marginBottom: 8 }}>
-              <Text style={{ marginBottom: 4 }}>Đơn vị</Text>
-              <Select
-                options={UNITS_OPTIONS.map((unit) => ({
-                  label: unit.label,
-                  value: unit.value,
-                }))}
-                value={value}
-                onChange={onChange}
-                placeholder="Chọn đơn vị"
-              />
-              {errors.fish?.[index]?.unit && (
-                <Text style={{ color: "red" }}>
-                  {errors.fish[index]?.unit?.message as string}
-                </Text>
-              )}
-            </View>
-          )}
-        />
-
-        {/* Size (optional) */}
-        <Controller
-          control={control}
-          name={`fish.${index}.size`}
-          render={({ field: { value, onChange, onBlur } }) => (
-            <View style={{ marginBottom: 8 }}>
-              <Text style={{ marginBottom: 4 }}>
-                Kích thước (cm) — tùy chọn
-              </Text>
-              <TextInput
-                keyboardType="numeric"
-                value={value ? String(value) : ""}
-                onBlur={onBlur}
-                onChangeText={(t) =>
-                  onChange(t ? Number(t.replace(/,/g, ".")) : undefined)
-                }
-                style={{ padding: 10, borderWidth: 1, borderRadius: 6 }}
-              />
-              {errors.fish?.[index]?.size && (
-                <Text style={{ color: "red" }}>
-                  {errors.fish[index]?.size?.message as string}
-                </Text>
-              )}
-            </View>
-          )}
-        />
-
-        {/* Remove row */}
-        <View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
-          <Button title="Xóa loài này" onPress={() => remove(index)} />
+          <TouchableOpacity
+            onPress={() => handleToggleExpanded(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={isExpanded ? "chevron.up" : "chevron.down"}
+              size={24}
+              color="#fff"
+            />
+          </TouchableOpacity>
         </View>
+
+        {/* Header - visible when collapsed */}
+        {!isExpanded && (
+          <View style={{ paddingRight: 100 }}>
+            {(() => {
+              const fishId = watch(`fish.${index}.id`);
+              const fishName = fishSpecies?.find((f) => f.id === fishId)?.name;
+              const quantity = watch(`fish.${index}.quantity`);
+              const unit = watch(`fish.${index}.unit`);
+
+              return fishName ? (
+                <View style={styles.fishCardHeaderContent}>
+                  <Text style={styles.fishCardTitle}>{fishName}:</Text>
+                  <Text style={styles.fishCardSubtitle}>
+                    {quantity} {unit}
+                  </Text>
+                </View>
+              ) : null;
+            })()}
+          </View>
+        )}
+
+        {/* Form - visible when expanded */}
+        {isExpanded && (
+          <View style={{ paddingRight: 100 }}>
+            {/* Species dropdown */}
+            <Controller
+              control={control}
+              name={`fish.${index}.id`}
+              render={({ field: { value, onChange } }) => (
+                <View style={styles.fieldGroup}>
+                  <Text style={styles.label}>Tên cá</Text>
+                  <Select
+                    options={fishSpecies!.map((fish) => ({
+                      label: fish.name,
+                      value: fish.id,
+                    }))}
+                    value={value}
+                    onChange={onChange}
+                    placeholder="Chọn loài cá"
+                    disabled={!isEditing}
+                  />
+                  {errors.fish?.[index]?.id && (
+                    <Text style={styles.errorText}>
+                      {errors.fish[index]?.id?.message as string}
+                    </Text>
+                  )}
+                </View>
+              )}
+            />
+
+            {/* Quantity */}
+            <Controller
+              control={control}
+              name={`fish.${index}.quantity`}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <View style={styles.fieldGroup}>
+                  <Text style={styles.label}>Số lượng</Text>
+                  <TextInput
+                    keyboardType="numeric"
+                    value={String(value ?? "")}
+                    onBlur={onBlur}
+                    onChangeText={(t) =>
+                      onChange(Number(t.replace(/,/g, ".")) || 0)
+                    }
+                    style={[styles.input, !isEditing && styles.inputDisabled]}
+                    editable={isEditing}
+                  />
+                  {errors.fish?.[index]?.quantity && (
+                    <Text style={styles.errorText}>
+                      {errors.fish[index]?.quantity?.message as string}
+                    </Text>
+                  )}
+                </View>
+              )}
+            />
+
+            {/* Unit dropdown */}
+            <Controller
+              control={control}
+              name={`fish.${index}.unit`}
+              render={({ field: { value, onChange } }) => (
+                <View style={styles.fieldGroup}>
+                  <Text style={styles.label}>Đơn vị</Text>
+                  <Select
+                    options={UNITS_OPTIONS.map((unit) => ({
+                      label: unit.label,
+                      value: unit.value,
+                    }))}
+                    value={value}
+                    onChange={onChange}
+                    placeholder="Chọn đơn vị"
+                    disabled={!isEditing}
+                  />
+                  {errors.fish?.[index]?.unit && (
+                    <Text style={styles.errorText}>
+                      {errors.fish[index]?.unit?.message as string}
+                    </Text>
+                  )}
+                </View>
+              )}
+            />
+
+            {/* Size (optional) */}
+            <Controller
+              control={control}
+              name={`fish.${index}.size`}
+              render={({ field: { value, onChange, onBlur } }) => (
+                <View style={styles.fieldGroup}>
+                  <Text style={styles.label}>Kích thước (cm) — tùy chọn</Text>
+                  <TextInput
+                    keyboardType="numeric"
+                    value={value ? String(value) : ""}
+                    onBlur={onBlur}
+                    onChangeText={(t) =>
+                      onChange(t ? Number(t.replace(/,/g, ".")) : undefined)
+                    }
+                    style={[styles.input, !isEditing && styles.inputDisabled]}
+                    editable={isEditing}
+                  />
+                  {errors.fish?.[index]?.size && (
+                    <Text style={styles.errorText}>
+                      {errors.fish[index]?.size?.message as string}
+                    </Text>
+                  )}
+                </View>
+              )}
+            />
+          </View>
+        )}
       </View>
     );
   };
@@ -257,30 +360,74 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
       presentationStyle="pageSheet"
       onRequestClose={onClose}
     >
-      <Text>{isCreateMode ? "Create Haul" : "Update Haul"}</Text>
-      <InfoSection fishingLog={fishingLog!} stt={fishingLogIndex} />
-      <FlatList
-        data={fields}
-        keyExtractor={(it) => it._id}
-        renderItem={renderRow}
-        ListFooterComponent={
-          <View style={{ marginTop: 8 }}>
-            <Button
-              title="Thêm loài cá"
-              onPress={() => append(defaultItem())}
-            />
+      <View style={styles.container}>
+        {/* Header */}
+        <View style={styles.header}>
+          <Text style={styles.title}>
+            {isCreateMode ? "Thêm mẻ cá" : "Chỉnh sửa mẻ cá"}
+          </Text>
+          <View style={styles.headerButtons}>
+            {isEditing ? (
+              <>
+                <TouchableOpacity
+                  onPress={() => {
+                    setIsEditing(false);
+                    reset(); // reset to previous values
+                  }}
+                  style={[styles.saveButton, { backgroundColor: "#6c757d" }]}
+                >
+                  <Text style={styles.saveButtonText}>Hủy</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  onPress={handleSubmit(onSubmit)}
+                  style={styles.saveButton}
+                >
+                  <Text style={styles.saveButtonText}>Lưu</Text>
+                </TouchableOpacity>
+              </>
+            ) : (
+              !isCreateMode && (
+                <TouchableOpacity
+                  onPress={() => setIsEditing(true)}
+                  style={[styles.saveButton, { backgroundColor: "#17a2b8" }]}
+                >
+                  <Text style={styles.saveButtonText}>Sửa</Text>
+                </TouchableOpacity>
+              )
+            )}
+            <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+              <View style={styles.closeIconButton}>
+                <IconSymbol name="xmark" size={24} color="#fff" />
+              </View>
+            </TouchableOpacity>
           </View>
-        }
-      />
+        </View>
 
-      {errors.fish && (
-        <Text style={{ color: "red", marginTop: 8 }}>
-          {(errors.fish as any)?.message}
-        </Text>
-      )}
+        {/* Content */}
+        <ScrollView style={styles.content}>
+          {/* Info Section */}
+          <InfoSection fishingLog={fishingLog!} stt={fishingLogIndex} />
 
-      <View style={{ marginTop: 16 }}>
-        <Button title="Lưu thu hoạch" onPress={handleSubmit(onSubmit)} />
+          {/* Fish List */}
+          {fields.map((item, index) => renderRow(item, index))}
+
+          {/* Add Button - only show when editing */}
+          {isEditing && (
+            <TouchableOpacity
+              onPress={() => append(defaultItem())}
+              style={styles.addButton}
+            >
+              <Text style={styles.addButtonText}>+ Thêm loài cá</Text>
+            </TouchableOpacity>
+          )}
+
+          {/* Error Message */}
+          {errors.fish && (
+            <Text style={styles.errorText}>
+              {(errors.fish as any)?.message}
+            </Text>
+          )}
+        </ScrollView>
       </View>
     </Modal>
   );