"use client";

import { Loading } from './Loading';
import { config } from "@/lib/config";
import { useDispatch } from "react-redux";
import { setLangs } from "@/redux/features/langSlice";
import { setRole } from "@/redux/features/permissionSlice";
import { useEffect, useState, Fragment } from "react";
import { Next13ProgressBar } from 'next13-progressbar';

export function App({children}){
    const dispatch = useDispatch();
    const [loading, setLoading] = useState(true);
    const base = "/sadmin";

    const fetchLangs = async()=>{
        // let langResponse = await axios.get(config.host()+"/mastership/langs");
        // await dispatch(setLangs(langResponse.data));
        let response = await fetch(config.host()+base+"/langs", {mode: "cors"});
        const langResponse = await response.json();
        await dispatch(setLangs(langResponse));
        setLoading((loading) => loading++);
    }

    const fetchCsrf = async()=>{
        let response = await fetch(config.host()+base+"/csrf-token", {mode: "cors"});
        const langResponse = await response.json();
        await dispatch(setLangs(langResponse));
        setLoading((loading) => loading++);
    }

    const fetchAccess = async()=>{
        let response = await fetch(config.host()+base+"/csrf-token", {mode: "cors"});
        const accessResponse = await response.json();
        await dispatch(setRole(accessResponse));
        setLoading((loading) => loading++);
    }

    const fetchInitInfo = async()=>{
        let response = await fetch(config.host()+base+"/initInfo", {mode: "cors"});
        const info = await response.json();
        console.log("info", info);
        await dispatch(setRole(info.permissions));
        await dispatch(setLangs(info.langs));
        window.document.getElementById('csrf-token').content = info.csrfToken;
        setLoading(false);
    }

    useEffect(()=>{
        // fetchLangs();
        // fetchCsrf();
        // fetchAccess();
        fetchInitInfo();
        // $('body').css('padding', "15px 28px");
    }, []);
    
    if(loading){
        return <><Loading key={"App_loading"} /></>;
    }else{    
        return <Fragment key="app_children">
            {children}
            <Next13ProgressBar height="4px" color="#EC6D45" options={{ showSpinner: true }} showOnShallow />
        </Fragment>
    }
}