"use client";
import { FooterProps } from "@/components/Footer";
import { HeaderProps } from "@/components/Header";
import { FC, PropsWithChildren, useRef } from "react";
import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
import styles from "./style.module.scss";
type Props = FooterProps & HeaderProps;
const Layout: FC<PropsWithChildren<Props>> = (props) => {
    console.count("layout render");
    const { children, ...other } = props;

    const swiperRef = useRef<SwiperClass>();
    const isOpen = useRef<boolean>(false);
    const homeContainerRef = useRef<HTMLDivElement>(null);
    const barRef = useRef<HTMLDivElement>(null);

    const startHandler = () => {
        homeContainerRef.current?.classList.add(styles.containerMask);
        barRef.current?.classList.add(styles.cross);
        isOpen.current = true;
    };
    const endHandler = () => {
        homeContainerRef.current?.classList.remove(styles.containerMask);
        barRef.current?.classList.remove(styles.cross);
        isOpen.current = false;
    };

    const openSliderHandler = () => {
        if (isOpen.current) {
            swiperRef.current?.slideNext();
        } else {
            swiperRef.current?.slidePrev();
        }
    };

    return (
        <div>
            <Swiper
                resistanceRatio={10}
                initialSlide={1}
                slidesPerView={"auto"}
                onSlidePrevTransitionStart={startHandler}
                onSlideNextTransitionEnd={endHandler}
                slideToClickedSlide
                onSwiper={(swiper) => {
                    swiperRef.current = swiper;
                }}
                runCallbacksOnInit={false}
                allowTouchMove={false}
            >
                {/*<SwiperSlide*/}
                {/*    lazy={true}*/}
                {/*    style={{ width: `${!mounted ? "0" : "70%"}` }}*/}
                {/*    className={"mx-w-[2.2222rem] bg-[rgb(31,31,31)]"}*/}
                {/*>*/}
                {/*    <section className="relative h-[100vh]">*/}
                {/*        <Sidebar></Sidebar>*/}
                {/*    </section>*/}
                {/*</SwiperSlide>*/}
                <SwiperSlide style={{ width: "100%" }}>
                    <section className="relative h-[100%]" ref={homeContainerRef}>
                        {/*<Header*/}
                        {/*    {...other}*/}
                        {/*    menuRender={() => (*/}
                        {/*        <div*/}
                        {/*            className={`absolute left-[0.1rem] top-[0.03rem] z-40 text-[#fff]`}*/}
                        {/*            ref={barRef}*/}
                        {/*            onClick={openSliderHandler}*/}
                        {/*        >*/}
                        {/*            <div className={styles.bar}></div>*/}
                        {/*            <div*/}
                        {/*                className={styles.bar}*/}
                        {/*                style={{ width: "0.1389rem" }}*/}
                        {/*            ></div>*/}
                        {/*            <div className={styles.bar}></div>*/}
                        {/*        </div>*/}
                        {/*    )}*/}
                        {/*></Header>*/}
                        <main className={"main-footer-header"} id="maincontainer">
                            {children}
                        </main>
                        {/*<Footer></Footer>*/}
                    </section>
                </SwiperSlide>
            </Swiper>
        </div>
    );
};

export default Layout;
