import { NextPage } from "next";
import {
  BackHomeButton,
  CommandPalletteButton,
  MinimalPage,
  PageHeading,
} from "ui";
import { VesselInfoForm } from "@/components/forms/vesselInfoForm";
import { BugReportButton, CommandInterface, Navigation } from "@/components";
import { useRouter } from "next/router";

const RegularVessel: NextPage = () => {
  const router = useRouter();

  const handleModeChange = (mode: "add" | "edit") => {
    if (mode === "edit") {
      const imo = router.query.imo;
      router.push(`/secure/manager/manageVessel/editRegularVessel?imo=${imo}`);
    }
  };

  return (
    <MinimalPage
      pageTitle={"Add Vessel | Vessel Interface"}
      pageDescription={"Vessel Interface | Vessel Info"}
      commandPrompt
    >
      <div className="flex w-full flex-row justify-between pl-1 pt-1">
        <BackHomeButton />
        <Navigation />
        <div className="flex flex-row gap-4">
          <BugReportButton />
          <CommandPalletteButton />
          <CommandInterface />
        </div>
      </div>
      <PageHeading text="Vessel Info" />
      <VesselInfoForm mode="add" onModeChange={handleModeChange} />
    </MinimalPage>
  );
};

export default RegularVessel;