SeaGateway-App/components/ButtonCreateNewHaulOrTrip.tsx

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, { useEffect, useState } from "react";
import { Alert, StyleSheet, View } from "react-native";
import IconButton from "./IconButton";
import CreateOrUpdateHaulModal from "./tripInfo/modal/CreateOrUpdateHaulModal";

interface StartButtonProps {
  gpsData?: Model.GPSResponse;
  onPress?: () => void;
}

const ButtonCreateNewHaulOrTrip: React.FC<StartButtonProps> = ({
  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) {
      Alert.alert(
        "Kết thúc mẻ lưới",
        "Bạn có chắc chắn muốn kết thúc mẻ lưới này?",
        [
          {
            text: "Hủy",
            style: "cancel",
          },
          {
            text: "Kết thúc",
            onPress: () => {
              setIsStarted(false);
              Alert.alert("Thành công", "Đã kết thúc mẻ lưới!");
            },
          },
        ]
      );
    } else {
      Alert.alert("Bắt đầu mẻ lưới", "Bạn có muốn bắt đầu mẻ lưới mới?", [
        {
          text: "Hủy",
          style: "cancel",
        },
        {
          text: "Bắt đầu",
          onPress: () => {
            setIsStarted(true);
            Alert.alert("Thành công", "Đã bắt đầu mẻ lưới mới!");
          },
        },
      ]);
    }

    if (onPress) {
      onPress();
    }
  };

  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 (
    <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>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#4ecdc4", // màu ngọc lam
    borderRadius: 8,
    paddingVertical: 10,
    paddingHorizontal: 16,
    alignSelf: "flex-start",
    shadowColor: "#000",
    shadowOpacity: 0.15,
    shadowRadius: 3,
    shadowOffset: { width: 0, height: 2 },
    elevation: 3, // hiệu ứng nổi trên Android
  },
  buttonActive: {
    backgroundColor: "#e74c3c", // màu đỏ khi đang hoạt động
  },
  content: {
    flexDirection: "row",
    alignItems: "center",
  },
  icon: {
    marginRight: 6,
  },
  text: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "600",
  },
});

export default ButtonCreateNewHaulOrTrip;