cập nhật animation hiển thị modal, call API edit

2025-12-22 22:47:08 +07:00
parent 67e9fc22a3
commit afc6acbfe2
16 changed files with 530 additions and 216 deletions
--- a/components/diary/FilterModal.tsx
+++ b/components/diary/FilterModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import {
  View,
  Text,
@@ -7,6 +7,8 @@ import {
  StyleSheet,
  Platform,
  ScrollView,
+  Animated,
+  Dimensions,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import StatusDropdown from "./StatusDropdown";
@@ -71,6 +73,47 @@ export default function FilterModal({
  const [endDate, setEndDate] = useState<Date | null>(null);
  const [selectedShip, setSelectedShip] = useState<ShipOption | null>(null);

+  // Animation values
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const slideAnim = useRef(new Animated.Value(Dimensions.get('window').height)).current;
+
+  // Handle animation when modal visibility changes
+  useEffect(() => {
+    if (visible) {
+      // Open animation: fade overlay + slide content up
+      Animated.parallel([
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(slideAnim, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [visible, fadeAnim, slideAnim]);
+
+  const handleClose = () => {
+    // Close animation: fade overlay + slide content down
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: true,
+      }),
+      Animated.timing(slideAnim, {
+        toValue: Dimensions.get('window').height,
+        duration: 250,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      onClose();
+    });
+  };
+
  const handleReset = () => {
    setStatus(null);
    setStartDate(null);
@@ -79,8 +122,22 @@ export default function FilterModal({
  };

  const handleApply = () => {
-    onApply({ status, startDate, endDate, selectedShip });
-    onClose();
+    // Close animation then apply
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: true,
+      }),
+      Animated.timing(slideAnim, {
+        toValue: Dimensions.get('window').height,
+        duration: 250,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      onApply({ status, startDate, endDate, selectedShip });
+      onClose();
+    });
  };

  const hasFilters =
@@ -128,23 +185,26 @@ export default function FilterModal({
  return (
    <Modal
      visible={visible}
-      animationType="fade"
+      animationType="none"
      transparent
-      onRequestClose={onClose}
+      onRequestClose={handleClose}
    >
-      <TouchableOpacity
-        style={styles.overlay}
-        activeOpacity={1}
-        onPress={onClose}
-      >
+      <Animated.View style={[styles.overlay, { opacity: fadeAnim }]}>
        <TouchableOpacity
-          style={[styles.modalContainer, themedStyles.modalContainer]}
+          style={styles.overlayTouchable}
          activeOpacity={1}
-          onPress={(e) => e.stopPropagation()}
+          onPress={handleClose}
+        />
+        <Animated.View
+          style={[
+            styles.modalContainer,
+            themedStyles.modalContainer,
+            { transform: [{ translateY: slideAnim }] }
+          ]}
        >
          {/* Header */}
          <View style={[styles.header, themedStyles.header]}>
-            <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+            <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
              <Ionicons name="close" size={24} color={colors.text} />
            </TouchableOpacity>
            <Text style={[styles.title, themedStyles.title]}>{t("diary.filter")}</Text>
@@ -218,8 +278,8 @@ export default function FilterModal({
              <Text style={styles.applyButtonText}>{t("diary.apply")}</Text>
            </TouchableOpacity>
          </View>
-        </TouchableOpacity>
-      </TouchableOpacity>
+        </Animated.View>
+      </Animated.View>
    </Modal>
  );
 }
@@ -231,6 +291,13 @@ const styles = StyleSheet.create({
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    justifyContent: "flex-end",
  },
+  overlayTouchable: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
  modalContainer: {
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
--- a/components/diary/TripCard.tsx
+++ b/components/diary/TripCard.tsx
@@ -80,7 +80,7 @@ export default function TripCard({

  return (
    <View style={[styles.card, themedStyles.card]}>
-      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
+      <View>
        {/* Header */}
        <View style={styles.header}>
          <View style={styles.headerLeft}>
@@ -142,7 +142,7 @@ export default function TripCard({
            </Text>
          </View>
        </View>
-      </TouchableOpacity>
+      </View>

      {/* Action Buttons */}
      <View style={[styles.divider, themedStyles.divider]} />
--- a/components/diary/TripFormModal/AutoFillSection.tsx
+++ b/components/diary/TripFormModal/AutoFillSection.tsx
--- a/components/diary/TripFormModal/BasicInfoInput.tsx
+++ b/components/diary/TripFormModal/BasicInfoInput.tsx
@@ -12,11 +12,13 @@ import { useThemeContext } from "@/hooks/use-theme-context";
 interface BasicInfoInputProps {
  fishingGroundCodes: string;
  onChange: (value: string) => void;
+  disabled?: boolean;
 }

 export default function BasicInfoInput({
  fishingGroundCodes,
  onChange,
+  disabled = false,
 }: BasicInfoInputProps) {
  const { t } = useI18n();
  const { colors } = useThemeContext();
@@ -25,7 +27,7 @@ export default function BasicInfoInput({
    label: { color: colors.text },
    subLabel: { color: colors.textSecondary },
    input: {
-      backgroundColor: colors.card,
+      backgroundColor: disabled ? colors.backgroundSecondary : colors.card,
      borderColor: colors.border,
      color: colors.text,
    },
@@ -46,6 +48,7 @@ export default function BasicInfoInput({
        placeholder={t("diary.fishingGroundCodesPlaceholder")}
        placeholderTextColor={colors.textSecondary}
        keyboardType="numeric"
+        editable={!disabled}
      />
    </View>
  );
--- a/components/diary/TripFormModal/FishingGearList.tsx
+++ b/components/diary/TripFormModal/FishingGearList.tsx
@@ -20,11 +20,13 @@ interface FishingGear {
 interface FishingGearListProps {
  items: FishingGear[];
  onChange: (items: FishingGear[]) => void;
+  disabled?: boolean;
 }

 export default function FishingGearList({
  items,
  onChange,
+  disabled = false,
 }: FishingGearListProps) {
  const { t } = useI18n();
  const { colors } = useThemeContext();
@@ -93,6 +95,7 @@ export default function FishingGearList({
              onChangeText={(value) => handleUpdateGear(gear.id, "name", value)}
              placeholder={t("diary.gearNamePlaceholder")}
              placeholderTextColor={colors.textSecondary}
+              editable={!disabled}
            />
          </View>

@@ -108,38 +111,43 @@ export default function FishingGearList({
              placeholder={t("diary.gearNumberPlaceholder")}
              placeholderTextColor={colors.textSecondary}
              keyboardType="numeric"
+              editable={!disabled}
            />
          </View>

-          {/* Action Buttons */}
-          <View style={styles.actionButtons}>
-            <TouchableOpacity
-              onPress={() => handleDuplicateGear(gear)}
-              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-            >
-              <Ionicons name="copy-outline" size={20} color={colors.text} />
-            </TouchableOpacity>
-            <TouchableOpacity
-              onPress={() => handleRemoveGear(gear.id)}
-              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-            >
-              <Ionicons name="trash-outline" size={20} color={colors.error} />
-            </TouchableOpacity>
-          </View>
+          {/* Action Buttons - hide when disabled */}
+          {!disabled && (
+            <View style={styles.actionButtons}>
+              <TouchableOpacity
+                onPress={() => handleDuplicateGear(gear)}
+                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+              >
+                <Ionicons name="copy-outline" size={20} color={colors.text} />
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => handleRemoveGear(gear.id)}
+                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+              >
+                <Ionicons name="trash-outline" size={20} color={colors.error} />
+              </TouchableOpacity>
+            </View>
+          )}
        </View>
      ))}

-      {/* Add Button */}
-      <TouchableOpacity
-        style={[styles.addButton, themedStyles.addButton]}
-        onPress={handleAddGear}
-        activeOpacity={0.7}
-      >
-        <Ionicons name="add" size={20} color={colors.primary} />
-        <Text style={[styles.addButtonText, themedStyles.addButtonText]}>
-          {t("diary.addFishingGear")}
-        </Text>
-      </TouchableOpacity>
+      {/* Add Button - hide when disabled */}
+      {!disabled && (
+        <TouchableOpacity
+          style={[styles.addButton, themedStyles.addButton]}
+          onPress={handleAddGear}
+          activeOpacity={0.7}
+        >
+          <Ionicons name="add" size={20} color={colors.primary} />
+          <Text style={[styles.addButtonText, themedStyles.addButtonText]}>
+            {t("diary.addFishingGear")}
+          </Text>
+        </TouchableOpacity>
+      )}
    </View>
  );
 }
--- a/components/diary/TripFormModal/MaterialCostList.tsx
+++ b/components/diary/TripFormModal/MaterialCostList.tsx
@@ -25,6 +25,7 @@ interface TripCost {
 interface MaterialCostListProps {
  items: TripCost[];
  onChange: (items: TripCost[]) => void;
+  disabled?: boolean;
 }

 // Predefined cost types
@@ -39,6 +40,7 @@ const COST_TYPES = [
 export default function MaterialCostList({
  items,
  onChange,
+  disabled = false,
 }: MaterialCostListProps) {
  const { t } = useI18n();
  const { colors } = useThemeContext();
@@ -146,8 +148,9 @@ export default function MaterialCostList({
              </Text>
              <TouchableOpacity
                style={[styles.dropdown, themedStyles.dropdown]}
-                onPress={() => setTypeDropdownVisible(cost.id)}
-                activeOpacity={0.7}
+                onPress={disabled ? undefined : () => setTypeDropdownVisible(cost.id)}
+                activeOpacity={disabled ? 1 : 0.7}
+                disabled={disabled}
              >
                <Text
                  style={[
@@ -158,11 +161,13 @@ export default function MaterialCostList({
                >
                  {getTypeLabel(cost.type)}
                </Text>
-                <Ionicons
-                  name="chevron-down"
-                  size={16}
-                  color={colors.textSecondary}
-                />
+                {!disabled && (
+                  <Ionicons
+                    name="chevron-down"
+                    size={16}
+                    color={colors.textSecondary}
+                  />
+                )}
              </TouchableOpacity>

              {/* Type Dropdown Modal */}
@@ -222,6 +227,7 @@ export default function MaterialCostList({
                placeholder="0"
                placeholderTextColor={colors.textSecondary}
                keyboardType="numeric"
+                editable={!disabled}
              />
            </View>

@@ -238,6 +244,7 @@ export default function MaterialCostList({
                }
                placeholder={t("diary.unitPlaceholder")}
                placeholderTextColor={colors.textSecondary}
+                editable={!disabled}
              />
            </View>
          </View>
@@ -261,6 +268,7 @@ export default function MaterialCostList({
                placeholder="0"
                placeholderTextColor={colors.textSecondary}
                keyboardType="numeric"
+                editable={!disabled}
              />
            </View>

@@ -276,40 +284,44 @@ export default function MaterialCostList({
              </View>
            </View>

-            {/* Action Buttons */}
-            <View style={styles.actionButtons}>
-              <TouchableOpacity
-                onPress={() => handleDuplicateMaterial(cost)}
-                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-              >
-                <Ionicons name="copy-outline" size={20} color={colors.text} />
-              </TouchableOpacity>
-              <TouchableOpacity
-                onPress={() => handleRemoveMaterial(cost.id)}
-                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-              >
-                <Ionicons
-                  name="trash-outline"
-                  size={20}
-                  color={colors.error}
-                />
-              </TouchableOpacity>
-            </View>
+            {/* Action Buttons - hide when disabled */}
+            {!disabled && (
+              <View style={styles.actionButtons}>
+                <TouchableOpacity
+                  onPress={() => handleDuplicateMaterial(cost)}
+                  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                >
+                  <Ionicons name="copy-outline" size={20} color={colors.text} />
+                </TouchableOpacity>
+                <TouchableOpacity
+                  onPress={() => handleRemoveMaterial(cost.id)}
+                  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                >
+                  <Ionicons
+                    name="trash-outline"
+                    size={20}
+                    color={colors.error}
+                  />
+                </TouchableOpacity>
+              </View>
+            )}
          </View>
        </View>
      ))}

-      {/* Add Button */}
-      <TouchableOpacity
-        style={[styles.addButton, themedStyles.addButton]}
-        onPress={handleAddMaterial}
-        activeOpacity={0.7}
-      >
-        <Ionicons name="add" size={20} color={colors.primary} />
-        <Text style={[styles.addButtonText, themedStyles.addButtonText]}>
-          {t("diary.addMaterialCost")}
-        </Text>
-      </TouchableOpacity>
+      {/* Add Button - hide when disabled */}
+      {!disabled && (
+        <TouchableOpacity
+          style={[styles.addButton, themedStyles.addButton]}
+          onPress={handleAddMaterial}
+          activeOpacity={0.7}
+        >
+          <Ionicons name="add" size={20} color={colors.primary} />
+          <Text style={[styles.addButtonText, themedStyles.addButtonText]}>
+            {t("diary.addMaterialCost")}
+          </Text>
+        </TouchableOpacity>
+      )}
    </View>
  );
 }
--- a/components/diary/TripFormModal/PortSelector.tsx
+++ b/components/diary/TripFormModal/PortSelector.tsx
@@ -15,6 +15,7 @@ interface PortSelectorProps {
  arrivalPortId: number;
  onDeparturePortChange: (portId: number) => void;
  onArrivalPortChange: (portId: number) => void;
+  disabled?: boolean;
 }

 export default function PortSelector({
@@ -22,6 +23,7 @@ export default function PortSelector({
  arrivalPortId,
  onDeparturePortChange,
  onArrivalPortChange,
+  disabled = false,
 }: PortSelectorProps) {
  const { t } = useI18n();
  const { colors } = useThemeContext();
@@ -69,8 +71,9 @@ export default function PortSelector({
          </Text>
          <TouchableOpacity
            style={[styles.portSelector, themedStyles.portSelector]}
-            onPress={handleSelectDeparturePort}
-            activeOpacity={0.7}
+            onPress={disabled ? undefined : handleSelectDeparturePort}
+            activeOpacity={disabled ? 1 : 0.7}
+            disabled={disabled}
          >
            <Text
              style={[
@@ -81,11 +84,13 @@ export default function PortSelector({
            >
              {getPortDisplayName(departurePortId)}
            </Text>
-            <Ionicons
-              name="ellipsis-horizontal"
-              size={20}
-              color={colors.textSecondary}
-            />
+            {!disabled && (
+              <Ionicons
+                name="ellipsis-horizontal"
+                size={20}
+                color={colors.textSecondary}
+              />
+            )}
          </TouchableOpacity>
        </View>

@@ -96,8 +101,9 @@ export default function PortSelector({
          </Text>
          <TouchableOpacity
            style={[styles.portSelector, themedStyles.portSelector]}
-            onPress={handleSelectArrivalPort}
-            activeOpacity={0.7}
+            onPress={disabled ? undefined : handleSelectArrivalPort}
+            activeOpacity={disabled ? 1 : 0.7}
+            disabled={disabled}
          >
            <Text
              style={[
@@ -108,11 +114,13 @@ export default function PortSelector({
            >
              {getPortDisplayName(arrivalPortId)}
            </Text>
-            <Ionicons
-              name="ellipsis-horizontal"
-              size={20}
-              color={colors.textSecondary}
-            />
+            {!disabled && (
+              <Ionicons
+                name="ellipsis-horizontal"
+                size={20}
+                color={colors.textSecondary}
+              />
+            )}
          </TouchableOpacity>
        </View>
      </View>
--- a/components/diary/TripFormModal/ShipSelector.tsx
+++ b/components/diary/TripFormModal/ShipSelector.tsx
@@ -17,11 +17,13 @@ import { useThemeContext } from "@/hooks/use-theme-context";
 interface ShipSelectorProps {
  selectedShipId: string;
  onChange: (shipId: string) => void;
+  disabled?: boolean;
 }

 export default function ShipSelector({
  selectedShipId,
  onChange,
+  disabled = false,
 }: ShipSelectorProps) {
  const { t } = useI18n();
  const { colors } = useThemeContext();
@@ -58,7 +60,10 @@ export default function ShipSelector({

  const themedStyles = {
    label: { color: colors.text },
-    selector: { backgroundColor: colors.card, borderColor: colors.border },
+    selector: { 
+      backgroundColor: disabled ? colors.backgroundSecondary : colors.card, 
+      borderColor: colors.border,
+    },
    selectorText: { color: colors.text },
    placeholder: { color: colors.textSecondary },
    modalContent: { backgroundColor: colors.card },
@@ -81,8 +86,9 @@ export default function ShipSelector({
      </Text>
      <TouchableOpacity
        style={[styles.selector, themedStyles.selector]}
-        onPress={() => setIsOpen(true)}
-        activeOpacity={0.7}
+        onPress={() => !disabled && setIsOpen(true)}
+        activeOpacity={disabled ? 1 : 0.7}
+        disabled={disabled}
      >
        <Text
          style={[
@@ -93,11 +99,13 @@ export default function ShipSelector({
        >
          {displayValue}
        </Text>
-        <Ionicons
-          name="ellipsis-horizontal"
-          size={20}
-          color={colors.textSecondary}
-        />
+        {!disabled && (
+          <Ionicons
+            name="ellipsis-horizontal"
+            size={20}
+            color={colors.textSecondary}
+          />
+        )}
      </TouchableOpacity>

      <Modal
--- a/components/diary/TripFormModal/TripDurationPicker.tsx
+++ b/components/diary/TripFormModal/TripDurationPicker.tsx
@@ -17,6 +17,7 @@ interface TripDurationPickerProps {
  endDate: Date | null;
  onStartDateChange: (date: Date | null) => void;
  onEndDateChange: (date: Date | null) => void;
+  disabled?: boolean;
 }

 export default function TripDurationPicker({
@@ -24,6 +25,7 @@ export default function TripDurationPicker({
  endDate,
  onStartDateChange,
  onEndDateChange,
+  disabled = false,
 }: TripDurationPickerProps) {
  const { t } = useI18n();
  const { colors, colorScheme } = useThemeContext();
@@ -127,8 +129,9 @@ export default function TripDurationPicker({
          </Text>
          <TouchableOpacity
            style={[styles.dateInput, themedStyles.dateInput]}
-            onPress={handleOpenStartPicker}
-            activeOpacity={0.7}
+            onPress={disabled ? undefined : handleOpenStartPicker}
+            activeOpacity={disabled ? 1 : 0.7}
+            disabled={disabled}
          >
            <Text
              style={[
@@ -139,11 +142,13 @@ export default function TripDurationPicker({
            >
              {startDate ? formatDate(startDate) : t("diary.selectDate")}
            </Text>
-            <Ionicons
-              name="calendar-outline"
-              size={20}
-              color={colors.textSecondary}
-            />
+            {!disabled && (
+              <Ionicons
+                name="calendar-outline"
+                size={20}
+                color={colors.textSecondary}
+              />
+            )}
          </TouchableOpacity>
        </View>

@@ -154,8 +159,9 @@ export default function TripDurationPicker({
          </Text>
          <TouchableOpacity
            style={[styles.dateInput, themedStyles.dateInput]}
-            onPress={handleOpenEndPicker}
-            activeOpacity={0.7}
+            onPress={disabled ? undefined : handleOpenEndPicker}
+            activeOpacity={disabled ? 1 : 0.7}
+            disabled={disabled}
          >
            <Text
              style={[
@@ -166,11 +172,13 @@ export default function TripDurationPicker({
            >
              {endDate ? formatDate(endDate) : t("diary.selectDate")}
            </Text>
-            <Ionicons
-              name="calendar-outline"
-              size={20}
-              color={colors.textSecondary}
-            />
+            {!disabled && (
+              <Ionicons
+                name="calendar-outline"
+                size={20}
+                color={colors.textSecondary}
+              />
+            )}
          </TouchableOpacity>
        </View>
      </View>
--- a/components/diary/TripFormModal/TripNameInput.tsx
+++ b/components/diary/TripFormModal/TripNameInput.tsx
@@ -12,16 +12,17 @@ import { useThemeContext } from "@/hooks/use-theme-context";
 interface TripNameInputProps {
  value: string;
  onChange: (value: string) => void;
+  disabled?: boolean;
 }

-export default function TripNameInput({ value, onChange }: TripNameInputProps) {
+export default function TripNameInput({ value, onChange, disabled = false }: TripNameInputProps) {
  const { t } = useI18n();
  const { colors } = useThemeContext();

  const themedStyles = {
    label: { color: colors.text },
    input: {
-      backgroundColor: colors.card,
+      backgroundColor: disabled ? colors.backgroundSecondary : colors.card,
      borderColor: colors.border,
      color: colors.text,
    },
@@ -38,6 +39,7 @@ export default function TripNameInput({ value, onChange }: TripNameInputProps) {
        onChangeText={onChange}
        placeholder={t("diary.tripNamePlaceholder")}
        placeholderTextColor={colors.textSecondary}
+        editable={!disabled}
      />
    </View>
  );
--- a/components/diary/TripFormModal/index.tsx
+++ b/components/diary/TripFormModal/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import {
  View,
  Text,
@@ -9,19 +9,21 @@ import {
  ScrollView,
  Alert,
  ActivityIndicator,
+  Animated,
+  Dimensions,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { useI18n } from "@/hooks/use-i18n";
 import { useThemeContext } from "@/hooks/use-theme-context";
-import FishingGearList from "@/components/diary/addTripModal/FishingGearList";
-import MaterialCostList from "@/components/diary/addTripModal/MaterialCostList";
-import TripNameInput from "@/components/diary/addTripModal/TripNameInput";
-import TripDurationPicker from "@/components/diary/addTripModal/TripDurationPicker";
-import PortSelector from "@/components/diary/addTripModal/PortSelector";
-import BasicInfoInput from "@/components/diary/addTripModal/BasicInfoInput";
+import FishingGearList from "@/components/diary/TripFormModal/FishingGearList";
+import MaterialCostList from "@/components/diary/TripFormModal/MaterialCostList";
+import TripNameInput from "@/components/diary/TripFormModal/TripNameInput";
+import TripDurationPicker from "@/components/diary/TripFormModal/TripDurationPicker";
+import PortSelector from "@/components/diary/TripFormModal/PortSelector";
+import BasicInfoInput from "@/components/diary/TripFormModal/BasicInfoInput";
 import ShipSelector from "./ShipSelector";
 import AutoFillSection from "./AutoFillSection";
-import { createTrip } from "@/controller/TripController";
+import { createTrip, updateTrip } from "@/controller/TripController";

 // Internal component interfaces - extend from Model with local id for state management
 export interface FishingGear extends Model.FishingGear {
@@ -32,16 +34,51 @@ export interface TripCost extends Model.TripCost {
  id: string;
 }

-interface AddTripModalProps {
+interface TripFormModalProps {
  visible: boolean;
  onClose: () => void;
-  onSuccess?: () => void; // Callback khi thêm chuyến đi thành công
+  onSuccess?: () => void;
+  mode?: 'add' | 'edit' | 'view';
+  tripData?: Model.Trip;
 }

-export default function AddTripModal({ visible, onClose, onSuccess }: AddTripModalProps) {
+export default function TripFormModal({ 
+  visible, 
+  onClose, 
+  onSuccess,
+  mode = 'add',
+  tripData,
+}: TripFormModalProps) {
  const { t } = useI18n();
  const { colors } = useThemeContext();

+  const isEditMode = mode === 'edit';
+  const isViewMode = mode === 'view';
+  const isReadOnly = isViewMode; // View mode is read-only
+
+  // Animation values
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const slideAnim = useRef(new Animated.Value(Dimensions.get('window').height)).current;
+
+  // Handle animation when modal visibility changes
+  useEffect(() => {
+    if (visible) {
+      // Open animation: fade overlay + slide content up
+      Animated.parallel([
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(slideAnim, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [visible, fadeAnim, slideAnim]);
+
  // Form state
  const [selectedShipId, setSelectedShipId] = useState<string>("");
  const [tripName, setTripName] = useState("");
@@ -51,21 +88,120 @@ export default function AddTripModal({ visible, onClose, onSuccess }: AddTripMod
  const [endDate, setEndDate] = useState<Date | null>(null);
  const [departurePortId, setDeparturePortId] = useState<number>(1);
  const [arrivalPortId, setArrivalPortId] = useState<number>(1);
-  const [fishingGroundCodes, setFishingGroundCodes] = useState<string>(""); // Input as string, convert to array
+  const [fishingGroundCodes, setFishingGroundCodes] = useState<string>("");
  const [isSubmitting, setIsSubmitting] = useState(false);

+  // Pre-fill form when in edit or view mode
+  useEffect(() => {
+    if ((isEditMode || isViewMode) && tripData && visible) {
+      // Fill ship ID (use vms_id as thingId)
+      setSelectedShipId(tripData.vms_id || "");
+      
+      // Fill trip name
+      setTripName(tripData.name || "");
+      
+      // Fill fishing gears
+      if (tripData.fishing_gears && Array.isArray(tripData.fishing_gears)) {
+        const gears: FishingGear[] = tripData.fishing_gears.map((gear, index) => ({
+          id: `${mode}-${Date.now()}-${index}`,
+          name: gear.name || "",
+          number: gear.number?.toString() || "",
+        }));
+        setFishingGears(gears);
+      }
+      
+      // Fill trip costs
+      if (tripData.trip_cost && Array.isArray(tripData.trip_cost)) {
+        const costs: TripCost[] = tripData.trip_cost.map((cost, index) => ({
+          id: `${mode}-${Date.now()}-${index}`,
+          type: cost.type || "",
+          amount: cost.amount || 0,
+          unit: cost.unit || "",
+          cost_per_unit: cost.cost_per_unit || 0,
+          total_cost: cost.total_cost || 0,
+        }));
+        setTripCosts(costs);
+      }
+      
+      // Fill dates
+      if (tripData.departure_time) {
+        setStartDate(new Date(tripData.departure_time));
+      }
+      if (tripData.arrival_time) {
+        setEndDate(new Date(tripData.arrival_time));
+      }
+      
+      // Fill ports
+      if (tripData.departure_port_id) {
+        setDeparturePortId(tripData.departure_port_id);
+      }
+      if (tripData.arrival_port_id) {
+        setArrivalPortId(tripData.arrival_port_id);
+      }
+      
+      // Fill fishing ground codes
+      if (tripData.fishing_ground_codes && Array.isArray(tripData.fishing_ground_codes)) {
+        setFishingGroundCodes(tripData.fishing_ground_codes.join(", "));
+      }
+    }
+  }, [isEditMode, isViewMode, tripData, visible, mode]);
+
  const handleCancel = () => {
-    // Reset form
-    setSelectedShipId("");
-    setTripName("");
-    setFishingGears([]);
-    setTripCosts([]);
-    setStartDate(null);
-    setEndDate(null);
-    setDeparturePortId(1);
-    setArrivalPortId(1);
-    setFishingGroundCodes("");
+    // Close animation: fade overlay + slide content down
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: true,
+      }),
+      Animated.timing(slideAnim, {
+        toValue: Dimensions.get('window').height,
+        duration: 250,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      // Close modal after animation completes
+      onClose();
+      
+      // Only reset form in add/edit mode, not needed for view mode
+      if (!isViewMode) {
+        // Reset form after closing
+        setTimeout(() => {
+          setSelectedShipId("");
+          setTripName("");
+          setFishingGears([]);
+          setTripCosts([]);
+          setStartDate(null);
+          setEndDate(null);
+          setDeparturePortId(1);
+          setArrivalPortId(1);
+          setFishingGroundCodes("");
+        }, 100);
+      }
+    });
+  };
+
+  // Handle close modal after successful submit - always resets form
+  const handleSuccessClose = () => {
+    // Reset animation values for next open
+    fadeAnim.setValue(0);
+    slideAnim.setValue(Dimensions.get('window').height);
+    
+    // Close modal immediately
    onClose();
+    
+    // Reset form after closing
+    setTimeout(() => {
+      setSelectedShipId("");
+      setTripName("");
+      setFishingGears([]);
+      setTripCosts([]);
+      setStartDate(null);
+      setEndDate(null);
+      setDeparturePortId(1);
+      setArrivalPortId(1);
+      setFishingGroundCodes("");
+    }, 100);
  };

  // Handle auto-fill from last trip data
@@ -169,32 +305,45 @@ export default function AddTripModal({ visible, onClose, onSuccess }: AddTripMod

    setIsSubmitting(true);
    try {
-      const response = await createTrip(selectedShipId, apiBody);
+      let response;
      
-      if (response.data) {
-        // Show success alert
-        Alert.alert(
-          t("common.success"),
-          t("diary.createTripSuccess")
-        );
-        
-        // Call onSuccess callback
-        if (onSuccess) {
-          onSuccess();
-        }
-        
-        // Reset form and close modal
-        handleCancel();
+      if (isEditMode && tripData) {
+        // Edit mode: call updateTrip
+        response = await updateTrip(tripData.id, apiBody);
+      } else {
+        // Add mode: call createTrip
+        response = await createTrip(selectedShipId, apiBody);
      }
+      
+      // Check if response is successful (response exists)
+      
+      // Call onSuccess callback first (to refresh data)
+      if (onSuccess) {
+        onSuccess();
+      }
+      
+      // Show success alert
+      Alert.alert(
+        t("common.success"),
+        isEditMode ? t("diary.updateTripSuccess") : t("diary.createTripSuccess")
+      );
+      
+      // Reset form and close modal
+      console.log("Calling handleSuccessClose");
+      handleSuccessClose();
+      
    } catch (error: any) {
-      console.error("Error creating trip:", error);
+      console.error(isEditMode ? "Error updating trip:" : "Error creating trip:", error);
      // Log detailed error information for debugging
      if (error.response) {
        console.error("Response status:", error.response.status);
        console.error("Response data:", JSON.stringify(error.response.data, null, 2));
      }
      console.log("Request body was:", JSON.stringify(apiBody, null, 2));
-      Alert.alert(t("common.error"), t("diary.createTripError"));
+      Alert.alert(
+        t("common.error"), 
+        isEditMode ? t("diary.updateTripError") : t("diary.createTripError")
+      );
    } finally {
      setIsSubmitting(false);
    }
@@ -227,19 +376,29 @@ export default function AddTripModal({ visible, onClose, onSuccess }: AddTripMod
  return (
    <Modal
      visible={visible}
-      animationType="fade"
+      animationType="none"
      transparent
-      onRequestClose={onClose}
+      onRequestClose={handleCancel}
    >
-      <View style={styles.overlay}>
-        <View style={[styles.modalContainer, themedStyles.modalContainer]}>
+      <Animated.View style={[styles.overlay, { opacity: fadeAnim }]}>
+        <Animated.View 
+          style={[
+            styles.modalContainer, 
+            themedStyles.modalContainer,
+            { transform: [{ translateY: slideAnim }] }
+          ]}
+        >
          {/* Header */}
          <View style={[styles.header, themedStyles.header]}>
            <TouchableOpacity onPress={handleCancel} style={styles.closeButton}>
              <Ionicons name="close" size={24} color={colors.text} />
            </TouchableOpacity>
            <Text style={[styles.title, themedStyles.title]}>
-              {t("diary.addTrip")}
+              {isViewMode 
+                ? t("diary.viewTrip") 
+                : isEditMode 
+                  ? t("diary.editTrip") 
+                  : t("diary.addTrip")}
            </Text>
            <View style={styles.placeholder} />
          </View>
@@ -248,24 +407,26 @@ export default function AddTripModal({ visible, onClose, onSuccess }: AddTripMod
          <ScrollView
            style={styles.content}
            showsVerticalScrollIndicator={false}
+            contentContainerStyle={isViewMode ? { paddingBottom: 40 } : undefined}
          >
-            {/* Auto Fill Section */}
-            <AutoFillSection onAutoFill={handleAutoFill} />
+            {/* Auto Fill Section - only show in add mode */}
+            {!isEditMode && !isViewMode && <AutoFillSection onAutoFill={handleAutoFill} />}

-            {/* Ship Selector */}
+            {/* Ship Selector - disabled in edit and view mode */}
            <ShipSelector
              selectedShipId={selectedShipId}
              onChange={setSelectedShipId}
+              disabled={isEditMode || isViewMode}
            />

            {/* Trip Name */}
-            <TripNameInput value={tripName} onChange={setTripName} />
+            <TripNameInput value={tripName} onChange={setTripName} disabled={isReadOnly} />

            {/* Fishing Gear List */}
-            <FishingGearList items={fishingGears} onChange={setFishingGears} />
+            <FishingGearList items={fishingGears} onChange={setFishingGears} disabled={isReadOnly} />

            {/* Trip Cost List */}
-            <MaterialCostList items={tripCosts} onChange={setTripCosts} />
+            <MaterialCostList items={tripCosts} onChange={setTripCosts} disabled={isReadOnly} />

            {/* Trip Duration */}
            <TripDurationPicker
@@ -273,6 +434,7 @@ export default function AddTripModal({ visible, onClose, onSuccess }: AddTripMod
              endDate={endDate}
              onStartDateChange={setStartDate}
              onEndDateChange={setEndDate}
+              disabled={isReadOnly}
            />

            {/* Port Selector */}
@@ -281,49 +443,53 @@ export default function AddTripModal({ visible, onClose, onSuccess }: AddTripMod
              arrivalPortId={arrivalPortId}
              onDeparturePortChange={setDeparturePortId}
              onArrivalPortChange={setArrivalPortId}
+              disabled={isReadOnly}
            />

            {/* Fishing Ground Codes */}
            <BasicInfoInput
              fishingGroundCodes={fishingGroundCodes}
              onChange={setFishingGroundCodes}
+              disabled={isReadOnly}
            />
          </ScrollView>

-          {/* Footer */}
-          <View style={[styles.footer, themedStyles.footer]}>
-            <TouchableOpacity
-              style={[styles.cancelButton, themedStyles.cancelButton]}
-              onPress={handleCancel}
-              activeOpacity={0.7}
-            >
-              <Text
-                style={[styles.cancelButtonText, themedStyles.cancelButtonText]}
+          {/* Footer - hide in view mode */}
+          {!isViewMode && (
+            <View style={[styles.footer, themedStyles.footer]}>
+              <TouchableOpacity
+                style={[styles.cancelButton, themedStyles.cancelButton]}
+                onPress={handleCancel}
+                activeOpacity={0.7}
              >
-                {t("common.cancel")}
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              style={[
-                styles.submitButton, 
-                themedStyles.submitButton,
-                isSubmitting && styles.submitButtonDisabled
-              ]}
-              onPress={handleSubmit}
-              activeOpacity={0.7}
-              disabled={isSubmitting}
-            >
-              {isSubmitting ? (
-                <ActivityIndicator size="small" color="#FFFFFF" />
-              ) : (
-                <Text style={styles.submitButtonText}>
-                  {t("diary.createTrip")}
+                <Text
+                  style={[styles.cancelButtonText, themedStyles.cancelButtonText]}
+                >
+                  {t("common.cancel")}
                </Text>
-              )}
-            </TouchableOpacity>
-          </View>
-        </View>
-      </View>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={[
+                  styles.submitButton, 
+                  themedStyles.submitButton,
+                  isSubmitting && styles.submitButtonDisabled
+                ]}
+                onPress={handleSubmit}
+                activeOpacity={0.7}
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? (
+                  <ActivityIndicator size="small" color="#FFFFFF" />
+                ) : (
+                  <Text style={styles.submitButtonText}>
+                    {isEditMode ? t("diary.saveChanges") : t("diary.createTrip")}
+                  </Text>
+                )}
+              </TouchableOpacity>
+            </View>
+          )}
+        </Animated.View>
+      </Animated.View>
    </Modal>
  );
 }