/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useState, useRef } from "react";
import Link from "next/link";
import StepMenu from "./StepMenu";
import HourGlassLoader from "../../../Loader/Loader";
import ShipmentDetails from "./ShipmentDetails";
import { FC } from "react";
import ShipmentFooter from "./ShipmentFooter";
import { useRouter } from "next/navigation";

export interface ShipmentOverViewProps {
  onClose?: any;
  step: number;
  setStep: any;
  shipmentDetails: any;
  setShipmentDetails: any;
}

const OverView: FC<ShipmentOverViewProps> = ({ onClose, step, setStep, shipmentDetails, setShipmentDetails }) => {
  const [isLoading] = useState<boolean>(false);
  const formRef = useRef<{ submitForm: () => void }>(null);
  const router = useRouter();

  // const handleNextClick = () => {
  //   if (step === 2) {
  //     formRef.current?.submitForm();
  //   } else {
  //     setStep((prev) => prev + 1);
  //   }
  // };
  const handleNextClick = () => {
    if (step === 1) {
      formRef.current?.submitForm(); // trigger validation + submit
      // setStep(2)
      // DON'T increment step here
    } else if (step === 2) {
      formRef.current?.submitForm(); // final submit or whatever you want
    }
  };
  
  
  const handleBackClick = () => {
    setStep((prev: number) => prev - 1);
  };

  const handleStepChange = (newStep: number) => {
    setStep(newStep);
  };
  const handleClearUrlPrams = () => router.push(`${window.location.pathname}`)
  return (
    <>
      <div
        id="menu-wizard-step-1"
        className="menu menu-box-right bg-white sendPackageBox menu-active"
        data-menu-height="cover"
        data-menu-width="cover"
      >
        <div className="header header-logo-center header-active shadow-l">
          <Link href="#" className="header-title">
          {shipmentDetails?.id ? 'Edit' : 'Create'} Shipment
          </Link>
          <a href="#" onClick={() => {
            handleClearUrlPrams();
            onClose();
          }} className="header-icon header-icon-1">
            <i className="fas fa-chevron-left" />
          </a>
        </div>

        <div
          className="card card-style bg-transparent shadow-0 mb-0 mx-3"
          style={{ height: "100%" }}
        >
          <div className="card-top mt-70">
            <StepMenu step={step} setStep={setStep} />
            <div
              className="divider position-absolute tab-divider start-0 end-0 stepBorderBox"
              style={{ zIndex: -1, marginTop: "-37px" }}
            />
            {step ? (
              <ShipmentDetails
                ref={formRef}
                step={step}
                onClose={onClose ?? (() => {})}
                editShipment={shipmentDetails}
                setShipmentDetails={setShipmentDetails}
                onStepChange={handleStepChange}
              />
            ) : null}
          </div>
          <ShipmentFooter
            step={step}
            shipmentDetails={shipmentDetails}
            handleBackClick={handleBackClick}
            handleNextClick={handleNextClick}
            onClose={onClose ?? (() => {})}
          />
        </div>
      </div>
      {isLoading && <HourGlassLoader />}
    </>
  );
};

export default OverView;