import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
import { useRef } from "react";
import { Outlet, useLocation } from "react-router-dom";
import routes from "@/routes";
import StepperBar from "@/components/CompatibilityV3/components/StepperBar";
import styles from "./styles.module.scss";

const stepperRoutes = [
  routes.client.compatibilityV3Birthdate(),
  routes.client.compatibilityV3PalmsInformation(),
  // routes.client.compatibilityV3WhatAspects(),
  routes.client.compatibilityV3RelationshipStatus(),
  routes.client.compatibilityV3RelateFollowing(),
  routes.client.compatibilityV3RomanticGestures(),
  routes.client.compatibilityV3CheckingPhone(),
  routes.client.compatibilityV3BirthdatePartner(),
  routes.client.compatibilityV3PalmsInformationPartner(),
  routes.client.compatibilityV3DateEvent(),

  // routes.client.compatibilityV3ElementResonates(),
  // routes.client.compatibilityV3FavoriteColor(),
  routes.client.compatibilityV3HeadOrHeart(),
  routes.client.compatibilityV3HeadOrHeartResult(),
  routes.client.compatibilityV3Email(),
];

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

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


      index++;

    }
    return 0;
  };

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

export default StepperLayout;
