import Header from "@/components/pages/ABDesign/v1/components/Header";
import styles from "./styles.module.scss";
import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
import { useMemo, useRef } from "react";
import { Outlet, useLocation } from "react-router-dom";
import routes from "@/routes";

const isBackButtonVisibleRoutes = [
  routes.client.palmistryV1Birthdate(),
  routes.client.palmistryV1PalmsInformation(),
  routes.client.palmistryV1WhatAspects(),
  routes.client.palmistryV1RelationshipStatus(),
  routes.client.palmistryV1ElementResonates(),
  routes.client.palmistryV1FavoriteColor(),
  routes.client.palmistryV1HeadOrHeart(),
  routes.client.palmistryV1RelateFollowing(),
  routes.client.palmistryV1LetScan(),
  routes.client.palmistryV1ScanInstruction(),
  routes.client.palmistryV1ScannedPhoto(),
  routes.client.palmistryV1Email(),
  routes.client.palmistryV1TrialChoice(),
  routes.client.palmistryV1TrialPayment(),
  routes.client.palmistryV1Payment(),
  routes.client.palmistryV2SaveOff(),
  routes.client.palmistryV2SecretDiscount(),
];

const arrowColors = {
  [routes.client.palmistryV2SaveOff()]: "#363636",
  [routes.client.palmistryV2SecretDiscount()]: "#363636",
}

const headerClassNames = {
  [routes.client.palmistryV2SaveOff()]: styles["header-save-off"],
  [routes.client.palmistryV2SecretDiscount()]: styles["header-secret-discount"],
}

function LayoutPalmistryV2() {
  const location = useLocation();
  const mainRef = useRef<HTMLDivElement>(null);

  const arrowColor = useMemo(() => {
    return arrowColors[location.pathname] || "#353E75";
  }, [location.pathname]);

  const headerClassName = useMemo(() => {
    return headerClassNames[location.pathname] || "";
  }, [location.pathname]);

  useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
    location,
  ]);

  const getIsBackButtonVisible = () => {
    for (const route of isBackButtonVisibleRoutes) {
      if (location.pathname.includes(route)) return true;
    }
    return false;
  };

  return (
    <>
      <main className={`${styles.main} content`} ref={mainRef}>
        <Header
          className={`${styles.header} ${headerClassName}`}
          classNameTitle={styles["header-title"]}
          isBackButtonVisible={getIsBackButtonVisible()}
          arrowColor={arrowColor}
        />
        {/* <Suspense fallback={<LoadingPage />}> */}
        <section className={styles.page}>
          <Outlet />
        </section>
        {/* </Suspense> */}
      </main>
    </>
  );
}

export default LayoutPalmistryV2;
