import AppbarCustomization from "./appbar/AppbarCustomization";
import {ActionIcon, Box, Flex, LoadingOverlay, Text, useMantineTheme} from "@mantine/core";
import { IconXboxX } from "@tabler/icons-react";
import NavbarCustomization from "./navbar/NavbarCustomization";
import DrawerCustomization from "./drawer/DrawerCustomization";
import { useEffect, useState } from "@wordpress/element";
import ComponentCustomization from "./component-customization/ComponentCustomization";
import {useViewportSize} from "@mantine/hooks";

const RightSidebar = ({setRecallAppbar,setRecallNavbar, setRecallDrawer, setReloadPageList, layout, setShowRightSidebar}) => {
  const [isLoading, setIsLoading] = useState(false);
  const { height, width } = useViewportSize();
  const theme = useMantineTheme();
    useEffect(() => {
        setIsLoading(true);
        setTimeout(() => {
            setIsLoading(false);
        }, 1000);
    }, [layout])


  return (

          <Box pt="sm" bg="white" mr={-1} pos="relative" h={`100vh`}>
              {/*<LoadingOverlay
                  visible={isLoading}
                  zIndex={1000}
                  overlayProps={{ radius: "sm", blur: 5 }}
                  loaderProps={{ type: "dots", size: 'sm' }}
              />*/}
              <LoadingOverlay
                  visible={isLoading}
                  zIndex={1000}
                  overlayProps={{ radius: "sm", blur: 5 }}
                  loaderProps={{ size: 'sm' }}
              />

              <Flex bg={`${theme.primaryColor}.0`} align="center" justify="space-between" p="xs">
                  <Text>
                      {layout?.name[0].toUpperCase() + layout?.name.slice(1).toLowerCase()}
                  </Text>
                  <ActionIcon
                      variant="light"
                      color={theme.colors.gray[5]}
                      onClick={() => setShowRightSidebar(false)}
                  >
                      <IconXboxX stroke={1.5} />
                  </ActionIcon>
              </Flex>
              <Box>

                  {"appbar" === layout?.mode && <AppbarCustomization setRecallAppbar={setRecallAppbar} layout={layout} /> }
                  {"navbar" === layout?.mode && <NavbarCustomization setRecallNavbar={setRecallNavbar} layout={layout} /> }
                  {"drawer" === layout?.mode && <DrawerCustomization setRecallDrawer={setRecallDrawer} layout={layout} /> }

                  {"component" === layout?.mode && <ComponentCustomization setReloadPageList={setReloadPageList} layout={layout} /> }

              </Box>
          </Box>
  );
};
export default RightSidebar;