"use client";

import { usePathname } from "next/navigation";

import { StepperBar } from "@/components/layout";
import { useRetainingStore } from "@/providers/retaining-store-provider";
import { ROUTES } from "@/shared/constants/client-routes";
import { ERetainingFunnel } from "@/types";

import styles from "./RetainingStepper.module.scss";

const stepperRoutes: Record<ERetainingFunnel, string[]> = {
  [ERetainingFunnel.Red]: [
    ROUTES.retainingFunnelAppreciateChoice(),
    ROUTES.retainingFunnelWhatReason(),
    ROUTES.retainingFunnelSecondChance(),
    ROUTES.retainingFunnelChangeMind(),
    ROUTES.retainingFunnelStopFor30Days(),
    ROUTES.retainingFunnelCancellationOfSubscription(),
  ],
  [ERetainingFunnel.Green]: [
    ROUTES.retainingFunnelAppreciateChoice(),
    ROUTES.retainingFunnelWhatReason(),
    ROUTES.retainingFunnelStopFor30Days(),
    ROUTES.retainingFunnelChangeMind(),
    ROUTES.retainingFunnelSecondChance(),
    ROUTES.retainingFunnelCancellationOfSubscription(),
  ],
  [ERetainingFunnel.Purple]: [
    ROUTES.retainingFunnelAppreciateChoice(),
    ROUTES.retainingFunnelWhatReason(),
    ROUTES.retainingFunnelChangeMind(),
    ROUTES.retainingFunnelSecondChance(),
    ROUTES.retainingFunnelStopFor30Days(),
    ROUTES.retainingFunnelCancellationOfSubscription(),
  ],
  [ERetainingFunnel.Stay50]: [ROUTES.retainingFunnelStay50Done()],
};

export default function RetainingStepper() {
  const pathname = usePathname();
  const { funnel } = useRetainingStore(state => state);

  const getCurrentStep = () => {
    if (
      [
        ROUTES.retainingFunnelPlanCancelled(),
        ROUTES.retainingFunnelSubscriptionStopped(),
      ].some(route => pathname.includes(route))
    ) {
      return stepperRoutes[funnel].length;
    }
    let index = 0;
    for (const route of stepperRoutes[funnel]) {
      if (pathname.includes(route)) {
        return index + 1;
      }
      index++;
    }
    return 0;
  };

  return (
    <StepperBar
      length={stepperRoutes[funnel].length}
      currentStep={getCurrentStep()}
      // color={darkTheme ? "#B2BCFF" : "#353E75"}
      color={"#353E75"}
      className={styles["stepper-bar"]}
    />
  );
}
