"use client";

import { Step, Stepper, Typography } from "@material-tailwind/react";
import { useEffect, useState } from "react";
import { FaCircle } from "react-icons/fa";
import { FaRegCircleCheck } from "react-icons/fa6";

import { CART_STATUS } from "../constants/app";
import { _useScopedI18n } from "../i18n/client";
import { ICart } from "../types/cart";

type StepperComponentProb = {
  cart: ICart;
};

const stepperStateValues = {
  [CART_STATUS.shopping]: 0,
  [CART_STATUS.checkout]: 1,
  [CART_STATUS.payment]: 2,
};

export default function StepperComponent({ cart }: StepperComponentProb) {
  //
  const scopeT = _useScopedI18n("sharedComponents.cartStepperComponent");

  const steps = [
    { label: scopeT("first") },
    { label: scopeT("second") },
    { label: scopeT("third") },
    { label: scopeT("four") },
  ];

  const [activeStep, setActiveStep] = useState(
    stepperStateValues[cart?.cartState] ?? 0,
  );

  useEffect(() => {
    if (cart) {
      (async () =>
        await setActiveStep(stepperStateValues[cart?.cartState] ?? 0))();
    }
  }, [cart]);

  return (
    <>
      <div className="md:flex-1 w-full md:mb-8 py-2 md:px-20 md:py-2 z-0">
        <Stepper
          activeStep={activeStep}
          lineClassName="bg-slate-50 h-1"
          activeLineClassName="bg-sushiGreen"
        >
          {steps.map((step, index) => (
            <Step
              key={index}
              className="h-7 w-7 bg-slate-50 border-4 border-transparent"
              activeClassName="border-4 border-sushiGreen bg-white text-black"
              completedClassName="bg-sushiGreen text-black"
            >
              {index === activeStep ? (
                <FaCircle className="h-3 w-3 text-sushiGreen" />
              ) : index < activeStep ? (
                <FaRegCircleCheck className="h-4 w-4 text-white" />
              ) : null}

              <div className="absolute -bottom-8 w-max text-center">
                <Typography
                  variant="h6"
                  className={`${index === activeStep ? "text-black-500" : "text-slate-500"} text-sm font-medium hidden md:block`}
                >
                  {step.label}
                </Typography>
              </div>
            </Step>
          ))}
        </Stepper>
      </div>
    </>
  );
}
