"use client";
import Sidebar from "@/components/Layout/Sidebar";
import Loading from "@/components/Loading";
import { useSystemStore } from "@/stores/useSystemStore";
import { setHtmlFontSize } from "@/utils";
import { setCookies } from "@/utils/Cookies";
import { ConfigProvider } from "antd-mobile";
import enUS from "antd-mobile/es/locales/en-US";
import { useLocale } from "next-intl";
import { ThemeProviderProps } from "next-themes/dist/types";
import { ReactNode, useEffect, useLayoutEffect, useRef } from "react";
import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
export interface ProvidersProps {
    children: ReactNode;
    themeProps?: Omit<ThemeProviderProps, "children">;
}
export const Providers = ({ children, themeProps }: ProvidersProps) => {
    const { isCollapse, setCollapse } = useSystemStore((state) => ({
        isCollapse: state.isCollapse,
        setCollapse: state.setCollapse,
    }));
    const local = useLocale();
    useEffect(() => {
        setCookies("language", local === "br" ? "pt" : local);
    });
    const swiperRef = useRef<SwiperClass>();
    const homeContainerRef = useRef<HTMLDivElement>(null);

    const startHandler = () => {
        homeContainerRef.current?.classList.add("containerMask");
        setCollapse(true);
    };
    const endHandler = () => {
        homeContainerRef.current?.classList.remove("containerMask");
        setCollapse(false);
    };

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

    useLayoutEffect(() => {
        // 调用响应式方法
        setHtmlFontSize();
    }, []);

    return (
        <ConfigProvider locale={enUS}>
            <div id="app" className="bg-black">
                <Swiper
                    resistanceRatio={10}
                    initialSlide={2}
                    slidesPerView={"auto"}
                    onSlidePrevTransitionStart={startHandler}
                    onSlideNextTransitionEnd={endHandler}
                    slideToClickedSlide
                    onSwiper={(swiper) => {
                        swiperRef.current = swiper;
                    }}
                    allowTouchMove={false}
                >
                    <SwiperSlide>
                        <section className="relative flex h-[100vh] items-center justify-center">
                            <Loading />
                        </section>
                    </SwiperSlide>

                    <SwiperSlide style={{ width: "70%" }} className={"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}>
                            {children}
                        </section>
                    </SwiperSlide>
                </Swiper>
            </div>
        </ConfigProvider>
    );
};
