import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
import { useMemo, 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 { EUnleashFlags, useUnleash } from "@/hooks/ab/unleash/useUnleash";
import Loader, { LoaderColor } from "@/components/Loader";

function StepperLayout() {
  const darkTheme = useSelector(selectors.selectDarkTheme);
  const location = useLocation();
  const mainRef = useRef<HTMLDivElement>(null);
  useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
    location,
  ]);
  const { variant: pathToEnteringBirthdate = "hide", isReady } = useUnleash({
    flag: EUnleashFlags.v2CompatibilityPathToEnteringBirthdate,
  });

  const stepperRoutes = useMemo(() => {
    if (pathToEnteringBirthdate === "show") {
      return [
        routes.client.compatibilityV2RelationshipStatus(),
        routes.client.compatibilityV2FearInRelationship(),
        routes.client.compatibilityV2ImportantStep(),
        routes.client.compatibilityV2WhoMatter(),
        routes.client.compatibilityV2YourPriority(),

        routes.client.compatibilityV2Birthdate(),
        routes.client.compatibilityV2PalmsInformation(),
        // routes.client.compatibilityV2WhatAspects(),
        routes.client.compatibilityV2RelateFollowing(),
        routes.client.compatibilityV2RomanticGestures(),
        routes.client.compatibilityV2CheckingPhone(),
        routes.client.compatibilityV2BirthdatePartner(),
        routes.client.compatibilityV2PalmsInformationPartner(),
        routes.client.compatibilityV2DateEvent(),

        // routes.client.compatibilityV2ElementResonates(),
        // routes.client.compatibilityV2FavoriteColor(),
        routes.client.compatibilityV2HeadOrHeart(),
        routes.client.compatibilityV2HeadOrHeartResult(),
        routes.client.compatibilityV2Email(),
      ];
    }
    return [
      routes.client.compatibilityV2Birthdate(),
      routes.client.compatibilityV2PalmsInformation(),
      // routes.client.compatibilityV2WhatAspects(),
      routes.client.compatibilityV2RelationshipStatus(),
      routes.client.compatibilityV2RelateFollowing(),
      routes.client.compatibilityV2RomanticGestures(),
      routes.client.compatibilityV2CheckingPhone(),
      routes.client.compatibilityV2BirthdatePartner(),
      routes.client.compatibilityV2PalmsInformationPartner(),
      routes.client.compatibilityV2DateEvent(),

      // routes.client.compatibilityV2ElementResonates(),
      // routes.client.compatibilityV2FavoriteColor(),
      routes.client.compatibilityV2HeadOrHeart(),
      routes.client.compatibilityV2HeadOrHeartResult(),
      routes.client.compatibilityV2Email(),
    ];
  }, [pathToEnteringBirthdate]);

  const getCurrentStep = () => {
    let index = 0;
    for (const route of stepperRoutes) {
      if (location.pathname.includes(route)) {
        if (
          location.pathname.includes(
            routes.client.compatibilityV2BirthdatePartner()
          )
        ) {
          return 8;
        }
        if (
          location.pathname.includes(
            routes.client.compatibilityV2PalmsInformationPartner()
          )
        ) {
          return 9;
        }
        return index + 1;
      }

      index++;
    }
    return 0;
  };

  if (!isReady) {
    return <Loader color={LoaderColor.Black} />;
  }

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

export default StepperLayout;
