import { Grid, GridItem } from '@chakra-ui/react';
import { Outlet, useLocation } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { useQuery, useQueryClient } from 'react-query';

import { EVENT_NAMES } from '../constants/define';
import { NavBar, SideBar, Footer, ErrorBoundary, ErrorViewer } from '../components/common';

const AdminLayout = () => {
  const [navSize, setNavSize] = useState('large'),
    location = useLocation(),
    currentPath = location.pathname,
    queryClient = useQueryClient();

  const handleChangeNavSize = () => {
    setNavSize(navSize === 'small' ? 'large' : 'small');
  };

  // const { isFetching, isLoading, isError, data, error } = useQuery({
  //   queryKey: [EVENT_NAMES.ESSENTIAL.RETRIEVE],
  //   queryFn: () => window.grpcAPIs[EVENT_NAMES.ESSENTIAL.RETRIEVE](),
  //   onSuccess: (response) => {
  //     queryClient.setQueryData([EVENT_NAMES.ROLES.LIST], response?.roles || []);
  //   },
  //   suspense: true,
  // });

  // useEffect(() => {
  //   (async () => {
  //     await queryClient.prefetchQuery({
  //       queryKey: [EVENT_NAMES.ESSENTIAL.RETRIEVE],
  //       queryFn: () => window.grpcAPIs[EVENT_NAMES.ESSENTIAL.RETRIEVE](),
  //     });
  //   })();
  //   // eslint-disable-next-line react-hooks/exhaustive-deps
  // }, []);

  return (
    <Grid
      templateAreas={{
        base: `"header header"
                  "aside main"
                  "aside footer"`,
      }}
      transition={'.2s ease'}
      gridTemplateRows={'70px 1fr 30px'}
      gridTemplateColumns={`${navSize === 'small' ? '75px' : '250px'} 1fr`}
      h="100vh"
      gap="1"
      fontWeight="bold"
    >
      <GridItem bg="#81a540" display="flex" alignItems="center" pl="2" area={'header'}>
        <NavBar navSize={navSize} onChangeNavSize={handleChangeNavSize} />
      </GridItem>
      <GridItem area={'aside'}>
        <SideBar currentPath={currentPath} navSize={navSize} />
      </GridItem>
      <GridItem mt={4} pl="2" area={'main'}>
        <ErrorBoundary
          fallback={({ ...rest }) => {
            return <ErrorViewer {...rest} />;
          }}
        >
          <Outlet />
        </ErrorBoundary>
      </GridItem>
      <GridItem display="flex" alignItems="center" justifyContent="center" pl="2" area={'footer'}>
        <Footer />
      </GridItem>
    </Grid>
  );
};

export default AdminLayout;
