import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
import { useRef } from "react";
import { Outlet, useLocation } from "react-router-dom";
import routes from "@/routes";
import StepperBar from "@/components/CompatibilityV2/components/StepperBar";
import styles from "./styles.module.scss";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { ERetainingFunnel } from "@/store/retainingFunnel";

// const stepperRoutes = [
//   routes.client.retainingFunnelAppreciateChoice(),
//   routes.client.retainingFunnelWhatReason(),
// ];

const stepperRoutes: Record<ERetainingFunnel, string[]> = {
  [ERetainingFunnel.Red]: [
    routes.client.retainingFunnelAppreciateChoice(),
    routes.client.retainingFunnelWhatReason(),
    routes.client.retainingFunnelSecondChance(),
    routes.client.retainingFunnelChangeMind(),
    routes.client.retainingFunnelStopFor30Days(),
    routes.client.retainingFunnelCancellationOfSubscription(),
  ],
  [ERetainingFunnel.Green]: [
    routes.client.retainingFunnelAppreciateChoice(),
    routes.client.retainingFunnelWhatReason(),
    routes.client.retainingFunnelStopFor30Days(),
    routes.client.retainingFunnelChangeMind(),
    routes.client.retainingFunnelSecondChance(),
    routes.client.retainingFunnelCancellationOfSubscription(),

  ],
  [ERetainingFunnel.Purple]: [
    routes.client.retainingFunnelAppreciateChoice(),
    routes.client.retainingFunnelWhatReason(),
    routes.client.retainingFunnelChangeMind(),
    routes.client.retainingFunnelSecondChance(),
    routes.client.retainingFunnelStopFor30Days(),
    routes.client.retainingFunnelCancellationOfSubscription(),
  ],
  [ERetainingFunnel.Stay50]: [
    routes.client.retainingFunnelStay50Done(),
  ],
}

function StepperLayout() {
  const darkTheme = useSelector(selectors.selectDarkTheme);
  const location = useLocation();
  const mainRef = useRef<HTMLDivElement>(null);
  useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
    location,
  ]);
  const retainingFunnel = useSelector(selectors.selectRetainingFunnel);

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

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

export default StepperLayout;
