import { useRef } from "react";
import styles from "./styles.module.scss"
import { useSchemeColorByElement } from "@/hooks/useSchemeColorByElement";
import { Outlet, useNavigate } from "react-router-dom";
import Header from "@/components/CompatibilityV2/components/Header";
import routes from "@/routes";

const isBackButtonVisibleRoutes: Array<string> = [
    routes.client.retainingFunnelAppreciateChoice(),
    routes.client.retainingFunnelWhatReason(),
    routes.client.retainingFunnelChangeMind(),
    routes.client.retainingFunnelSecondChance(),
    routes.client.retainingFunnelStopFor30Days(),
    routes.client.retainingFunnelCancellationOfSubscription(),
    routes.client.retainingFunnelPlanCancelled(),
    routes.client.retainingFunnelSubscriptionStopped(),
];

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

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

    const handleBack = () => {
        if ([
            routes.client.retainingFunnelPlanCancelled(),
            routes.client.retainingFunnelSubscriptionStopped(),
        ].some(route => location.pathname.includes(route))) {
            return navigate(routes.client.home());
        }
        navigate(-1);
    }

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

export default Layout