import styles from "./styles.module.css";
import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
import { useEffect, useRef } from "react";
import { Outlet, useLocation, useSearchParams } from "react-router-dom";
import routes from "@/routes";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import PaymentModalV1 from "@/components/CompatibilityV2/components/PaymentModalV1";
import Header from "@/components/CompatibilityV2/components/Header";

const isBackButtonVisibleRoutes = [
  routes.client.compatibilityV2Birthdate(),
  routes.client.compatibilityV2PalmsInformation(),
  routes.client.compatibilityV2WhatAspects(),
  routes.client.compatibilityV2RelationshipStatus(),
  routes.client.compatibilityV2ElementResonates(),
  routes.client.compatibilityV2FavoriteColor(),
  routes.client.compatibilityV2HeadOrHeart(),
  routes.client.compatibilityV2RelateFollowing(),
  routes.client.compatibilityV2LetScan(),
  routes.client.compatibilityV2ScanInstruction(),
  routes.client.compatibilityV2ScannedPhoto(),
  routes.client.compatibilityV2Email(),
  routes.client.compatibilityV2TrialChoice(),
  routes.client.compatibilityV2TrialPayment(),
  routes.client.compatibilityV2TryApp(),
  routes.client.compatibilityV2Payment(),
];

function Layout() {
  const dispatch = useDispatch();
  const token = useSelector(selectors.selectToken);
  const activeProductFromStore = useSelector(selectors.selectActiveProduct);
  const location = useLocation();
  const mainRef = useRef<HTMLDivElement>(null);
  useSchemeColorByElement(mainRef.current, "section.page, .page, section", [
    location,
  ]);
  const isShowPaymentModal = useSelector(
    selectors.selectCompatibilityV2IsShowPaymentModalV1
  );
  
  const [searchParams] = useSearchParams();
  const subscriptionStatus =
    searchParams.get("redirect_status") === "succeeded" ? "subscribed" : "lead";

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

  useEffect(() => {
    dispatch(actions.compatibilityV2.setIsShowPaymentModalV1(false));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [location]);

  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 />
          {!!token.length && !!activeProductFromStore && (
            [
              routes.client.compatibilityV2Payment(),
              routes.client.compatibilityV2TrialPayment(),
            ].includes(location.pathname) &&
            <PaymentModalV1
              className={
                isShowPaymentModal || subscriptionStatus === "subscribed"
                  ? styles["payment-modal-active"]
                  : styles["payment-modal-hide"]
              }
            />
          )}
        </section>
        {/* </Suspense> */}
      </main>
    </>
  );
}

export default Layout;