import styles from "./styles.module.css";
import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
import { useRef } from "react";
import { Outlet, useLocation } from "react-router-dom";
import routes from "@/routes";
import Header from "@/components/CompatibilityV4/components/Header";

const isBackButtonVisibleRoutes = [
  routes.client.compatibilityV4Birthdate(),
  routes.client.compatibilityV4PalmsInformation(),
  routes.client.compatibilityV4WhatAspects(),
  routes.client.compatibilityV4RelationshipStatus(),
  routes.client.compatibilityV4ElementResonates(),
  routes.client.compatibilityV4FavoriteColor(),
  routes.client.compatibilityV4HeadOrHeart(),
  routes.client.compatibilityV4RelateFollowing(),
  routes.client.compatibilityV4LetScan(),
  routes.client.compatibilityV4ScanInstruction(),
  routes.client.compatibilityV4ScannedPhoto(),
  routes.client.compatibilityV4Email(),
  routes.client.compatibilityV4TrialChoice(),
  routes.client.compatibilityV4TrialPayment(),
  routes.client.compatibilityV4TryApp(),
  routes.client.compatibilityV4Payment(),
  routes.client.compatibilityV4YourAnalysis(),
  routes.client.compatibilityV4Birthtime(),
  routes.client.compatibilityV4Birthplace(),
  routes.client.compatibilityV4CalculateInAdvance(),
  routes.client.compatibilityV4ResultAnalysis(),
  routes.client.compatibilityV4Review(),
  routes.client.compatibilityV4GenderPartner(),
  routes.client.compatibilityV4PartnerSimilarity(),
  routes.client.compatibilityV4PartnerAnalysis(),
  routes.client.compatibilityV4AlmostThere(),
  routes.client.compatibilityV4CheckingPhone(),
  routes.client.compatibilityV4ComplexRelationshipAspect(),
  routes.client.compatibilityV4StressResponse(),
  routes.client.compatibilityV4WhatAddToAnalysis(),
  routes.client.compatibilityV4Loading(),
  routes.client.compatibilityV4DateEvent(),
  routes.client.compatibilityV4PartnerPassword(),
  routes.client.compatibilityV4YourFear(),
  routes.client.compatibilityV4YourInclination(),
  routes.client.compatibilityV4PotentialPartnerName(),
  routes.client.compatibilityV4PotentialPartnerBirthdate(),
  routes.client.compatibilityV4FormerPartnerName(),
  routes.client.compatibilityV4FormerPartnerBirthdate(),
];

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

  const getIsBackButtonVisible = () => {
    if ([
      routes.client.compatibilityV4RelationshipStatusResult(),
      routes.client.compatibilityV4ResultAnalysisResult(),
      routes.client.compatibilityV4HeadOrHeartResult(),
      routes.client.compatibilityV4CalculateInAdvanceResult(),
      routes.client.compatibilityV4StressResponseResult(),
    ].includes(location.pathname)) return false;
    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}
          classNameTitle={styles["header-title"]}
          isBackButtonVisible={getIsBackButtonVisible()}
        />
        {/* <Suspense fallback={<LoadingPage />}> */}
        <section className={styles.page}>
          <Outlet />
        </section>
        {/* </Suspense> */}
      </main>
    </>
  );
}

export default Layout;
