thêm toast, thêm logic cho phần ButtonCreateNewHaulOrTrip

components/ButtonCreateNewHaulOrTrip.tsx

@@ -1,17 +1,40 @@
+import { queryGpsData } from "@/controller/DeviceController";
+import {
+  queryStartNewHaul,
+  queryUpdateTripState,
+} from "@/controller/TripController";
+import {
+  showErrorToast,
+  showSuccessToast,
+  showWarningToast,
+} from "@/services/toast_service";
+import { useTrip } from "@/state/use-trip";
 import { AntDesign } from "@expo/vector-icons";
-import React, { useState } from "react";
-import { Alert, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import React, { useEffect, useState } from "react";
+import { Alert, StyleSheet, View } from "react-native";
+import IconButton from "./IconButton";
+import CreateOrUpdateHaulModal from "./tripInfo/modal/CreateOrUpdateHaulModal";
 
 interface StartButtonProps {
-  title?: string;
+  gpsData?: Model.GPSResponse;
   onPress?: () => void;
 }
 
 const ButtonCreateNewHaulOrTrip: React.FC<StartButtonProps> = ({
-  title = "Bắt đầu mẻ lưới",
+  gpsData,
   onPress,
 }) => {
   const [isStarted, setIsStarted] = useState(false);
+  const [isFinishHaulModalOpen, setIsFinishHaulModalOpen] = useState(false);
+
+  const { trip, getTrip } = useTrip();
+  useEffect(() => {
+    getTrip();
+  }, [trip === null]);
+
+  const checkHaulFinished = () => {
+    return trip?.fishing_logs?.some((h) => h.status === 0);
+  };
 
   const handlePress = () => {
     if (isStarted) {
@@ -53,24 +76,103 @@ const ButtonCreateNewHaulOrTrip: React.FC<StartButtonProps> = ({
     }
   };
 
+  const handleStartTrip = async (state: number, note?: string) => {
+    if (trip?.trip_status !== 2) {
+      showWarningToast("Chuyến đi đã được bắt đầu hoặc hoàn thành.");
+      return;
+    }
+    try {
+      const resp = await queryUpdateTripState({
+        status: state,
+        note: note || "",
+      });
+      if (resp.status === 200) {
+        showSuccessToast("Bắt đầu chuyến đi thành công!");
+        getTrip();
+      }
+    } catch (error) {
+      console.error("Error stating trip :", error);
+      showErrorToast("");
+    }
+  };
+
+  const createNewHaul = async () => {
+    if (trip?.fishing_logs?.some((f) => f.status === 0)) {
+      showWarningToast(
+        "Vui lòng kết thúc mẻ lưới hiện tại trước khi bắt đầu mẻ mới"
+      );
+      return;
+    }
+    if (!gpsData) {
+      const response = await queryGpsData();
+      gpsData = response.data;
+    }
+    try {
+      const body: Model.NewFishingLogRequest = {
+        trip_id: trip?.id || "",
+        start_at: new Date(),
+        start_lat: gpsData.lat,
+        start_lon: gpsData.lon,
+        weather_description: "Nắng đẹp",
+      };
+
+      const resp = await queryStartNewHaul(body);
+      if (resp.status === 200) {
+        showSuccessToast("Bắt đầu mẻ lưới mới thành công!");
+        getTrip();
+      } else {
+        showErrorToast("Tạo mẻ lưới mới thất bại!");
+      }
+    } catch (error) {
+      console.log(error);
+      // showErrorToast("Tạo mẻ lưới mới thất bại!");
+    }
+  };
+
+  // Không render gì nếu trip đã hoàn thành hoặc bị hủy
+  if (trip?.trip_status === 4 || trip?.trip_status === 5) {
+    return null;
+  }
+
   return (
-    <TouchableOpacity
-      style={[styles.button, isStarted && styles.buttonActive]}
-      onPress={handlePress}
-      activeOpacity={0.8}
-    >
-      <View style={styles.content}>
-        <AntDesign
-          name={isStarted ? "close" : "plus"}
-          size={18}
-          color="#fff"
-          style={styles.icon}
-        />
-        <Text style={styles.text}>
-          {isStarted ? "Kết thúc mẻ lưới" : title}
-        </Text>
-      </View>
-    </TouchableOpacity>
+    <View>
+      {trip?.trip_status === 2 ? (
+        <IconButton
+          icon={<AntDesign name="plus" />}
+          type="primary"
+          style={{ backgroundColor: "green", borderRadius: 10 }}
+          onPress={async () => handleStartTrip(3)}
+        >
+          Bắt đầu chuyến đi
+        </IconButton>
+      ) : checkHaulFinished() ? (
+        <IconButton
+          icon={<AntDesign name="plus" color={"white"} />}
+          type="primary"
+          style={{ borderRadius: 10 }}
+          onPress={() => setIsFinishHaulModalOpen(true)}
+        >
+          Kết thúc mẻ lưới
+        </IconButton>
+      ) : (
+        <IconButton
+          icon={<AntDesign name="plus" color={"white"} />}
+          type="primary"
+          style={{ borderRadius: 10 }}
+          onPress={async () => {
+            createNewHaul();
+          }}
+        >
+          Bắt đầu mẻ lưới
+        </IconButton>
+      )}
+      <CreateOrUpdateHaulModal
+        isVisible={isFinishHaulModalOpen}
+        onClose={function (): void {
+          setIsFinishHaulModalOpen(false);
+        }}
+      />
+    </View>
   );
 };