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

const stepperRoutes = {
  "single": [
    routes.client.compatibilityV4RelationshipStatus(),
    routes.client.compatibilityV4Birthdate(),
    routes.client.compatibilityV4CalculateInAdvance(),
    routes.client.compatibilityV4Birthplace(),
    routes.client.compatibilityV4Birthtime(),
    routes.client.compatibilityV4YourAnalysis(),
    routes.client.compatibilityV4PalmsInformation(),
    routes.client.compatibilityV4Review(),
    routes.client.compatibilityV4DateEvent(),
    routes.client.compatibilityV4HeadOrHeart(),
    routes.client.compatibilityV4AlmostThere(),
    routes.client.compatibilityV4RelateFollowing(),
    routes.client.compatibilityV4PartnerPassword(),
    routes.client.compatibilityV4YourFear(),
    routes.client.compatibilityV4YourInclination(),
    routes.client.compatibilityV4StressResponse(),
    routes.client.compatibilityV4WhatAddToAnalysis(),
    routes.client.compatibilityV4PotentialPartnerName(),
    routes.client.compatibilityV4PotentialPartnerBirthdate(),
  ],
  "in_relationship": [
    routes.client.compatibilityV4RelationshipStatus(),
    routes.client.compatibilityV4Birthdate(),
    routes.client.compatibilityV4CalculateInAdvance(),
    routes.client.compatibilityV4Birthplace(),
    routes.client.compatibilityV4Birthtime(),
    routes.client.compatibilityV4YourAnalysis(),
    routes.client.compatibilityV4PalmsInformation(),
    routes.client.compatibilityV4ResultAnalysis(),
    routes.client.compatibilityV4Review(),
    routes.client.compatibilityV4GenderPartner(),
    routes.client.compatibilityV4PartnerSimilarity(),
    routes.client.compatibilityV4BirthdatePartner(),
    routes.client.compatibilityV4BirthplacePartner(),
    routes.client.compatibilityV4DateEvent(),
    routes.client.compatibilityV4PartnerAnalysis(),
    routes.client.compatibilityV4PalmsInformationPartner(),
    routes.client.compatibilityV4HeadOrHeart(),
    routes.client.compatibilityV4AlmostThere(),
    routes.client.compatibilityV4RelateFollowing(),
    routes.client.compatibilityV4CheckingPhone(),
    routes.client.compatibilityV4ComplexRelationshipAspect(),
    routes.client.compatibilityV4StressResponse(),
    routes.client.compatibilityV4WhatAddToAnalysis(),
    routes.client.compatibilityV4PotentialPartnerName(),
    routes.client.compatibilityV4PotentialPartnerBirthdate(),
    routes.client.compatibilityV4FormerPartnerName(),
    routes.client.compatibilityV4FormerPartnerBirthdate(),
  ]
};

function StepperLayout() {
  const location = useLocation();
  const mainRef = useRef<HTMLDivElement>(null);
  useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
    location,
  ]);
  const { relationshipStatus } = useSelector(selectors.selectCompatibilityV4Answers);
  const isSingle = relationshipStatus === "single";

  const getCurrentStep = () => {
    let index = 0;
    for (const route of stepperRoutes[isSingle ? "single" : "in_relationship"]) {
      if (location.pathname.includes(route)) {
        if (location.pathname.includes(routes.client.compatibilityV4BirthdatePartner())) {
          return 12;
        }
        if (location.pathname.includes(routes.client.compatibilityV4BirthplacePartner())) {
          return 13;
        }
        if (location.pathname.includes(routes.client.compatibilityV4PalmsInformationPartner())) {
          return 15;
        }
        return index + 1;
      }


      index++;

    }
    return 0;
  };

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

export default StepperLayout;
