/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
import NavBar from "../components/NavBar/NavBar";
import Footer from "../components/Footer/Footer";
import { Box, ScaleFade, SlideFade } from "@chakra-ui/react";
import { useLocation } from "react-router-dom";
import { useEffect } from "react";
import { useGetDailyDataQuery, useGetDateWiseDataQuery, useGetKPIDetailsQuery, useGetTransAllQuery } from "../Services/api.service";
import { timeZone } from "../Constants/Constants";
import SplashScreen from "../pages/SplashScreen";

const DefaultLayout = ({ children }) => {
  const location = useLocation();
  useEffect(() => {
    localStorage.setItem("light", true)
  });

  const {
    isLoading,
  } = useGetKPIDetailsQuery()

  const {
    isLoading: dateDataLoading,
  } = useGetDateWiseDataQuery(timeZone === "Asia/Calcutta" ? "Asia/Kolkata" : timeZone);

  const {
    isLoading: dailyDataLoading,
  } = useGetDailyDataQuery(timeZone === "Asia/Calcutta" ? "Asia/Kolkata" : timeZone);

   // Fetch transactions based on the current page and page size
   const {
    isLoading: isTransAllLoading,
  } = useGetTransAllQuery({
    pageNumber: 1,
    pageSize: 10,
  });


  return (
    isLoading || dateDataLoading || dailyDataLoading || isTransAllLoading ?<SplashScreen/>: <Box>
      <NavBar />
      <SlideFade
        key={location.pathname}
        initialScale={0.9}
        finalScale={1.2}
        in={true}
        transition={{
          enter: {
            duration: 0.5,
            delay: 0.1,
          },
        }}
      >
        {children}
      </SlideFade>
      <Footer />
    </Box> 
  );
};

export default DefaultLayout;