import React, { useEffect } from 'react';
import { Col, Row } from 'react-bootstrap';
import { usePage } from '@inertiajs/react';
import { useSelector } from "react-redux";
import { createSelector } from '@reduxjs/toolkit';

export default function Guest({ children }: any) {
    const { component } = usePage();
    const esLogin = component === 'Auth/Login';
    const ocultarFooter = esLogin;
    const selectLayoutState = (state : any) => state.Layout;
    const selectLayoutProperties = createSelector(
        selectLayoutState,
        (state:any) => ({
            layoutModeType: state.layoutModeType,
            backgroundImageType: state.backgroundImageType,
        })
    );
    // Inside your component
    const {
        layoutModeType, backgroundImageType
    }:any = useSelector(selectLayoutProperties);

    useEffect(() => {
        const landing = window.location.pathname.slice(1);
        const nftLanding = window.location.pathname.slice(1);
        const omitirFondoGalaxy = landing === 'landing' || nftLanding === 'nft-landing' || esLogin;

        if (layoutModeType === "dark") {
            document.body.setAttribute("data-bs-theme", "dark");
            document.documentElement.setAttribute("data-bs-theme", "dark");
            document.documentElement.setAttribute(
                "data-body-image",
                omitirFondoGalaxy ? "none" : backgroundImageType
            );
        } else {
            document.body.setAttribute("data-bs-theme", "light");
            document.documentElement.setAttribute("data-bs-theme", "light");
            document.documentElement.setAttribute(
                "data-body-image",
                omitirFondoGalaxy ? "none" : backgroundImageType
            );
        }

        if (esLogin) {
            document.body.classList.add('login-body-active');
        }

        return () => {
            document.body.removeAttribute("data-bs-theme");
            document.documentElement.removeAttribute("data-bs-theme");
            document.documentElement.removeAttribute("data-body-image");
            document.body.classList.remove('login-body-active');
        };
    }, [layoutModeType, backgroundImageType, esLogin]);
    return (
        <React.Fragment>
            <div className="auth-page-wrapper">

                {children}

                {!ocultarFooter && (
                <footer className="footer">
                    <div className="container">
                        <Row>
                            <Col lg={12}>
                                <div className="text-center">
                                    <p className="mb-0 text-muted">&copy; {new Date().getFullYear()} Desarrollo por Somos tu Webmaster.</p>
                                </div>
                            </Col>
                        </Row>
                    </div>
                </footer>
                )}
            </div>
        </React.Fragment>
    );
}