import {Accordion, ScrollArea, Text} from "@mantine/core";
import {IconLayoutBottombar, IconLayoutNavbar, IconLayoutSidebarLeftExpand} from "@tabler/icons-react";
import {lazy, Suspense} from "@wordpress/element";
import {useViewportSize} from "@mantine/hooks";
const AppbarLayouts = lazy(() => import('./appbar/AppbarLayouts'));
const NavbarLayouts = lazy(() => import('./navbar/NavbarLayouts'));
const DrawerLayouts = lazy(() => import('./drawer/DrawerLayouts'));
export default function GlobalComponents(){
    const {height, width} = useViewportSize();

    return (
        <ScrollArea h={height - 188} scrollbarSize={3} pos="relative">
            <Accordion chevronPosition="right" variant="contained" mb={`sm`} defaultValue="" styles={{
                content: {
                    padding: 5
                }
            }}
            >
                <Accordion.Item mb={10} style={{borderTop: '1px solid var(--mantine-color-gray-2)', borderRadius: 'var(--mantine-radius-sm)'}} value={`Appbar`}>
                    <Accordion.Control icon={<IconLayoutNavbar stroke={1}/>}>
                        <Text fw={700}> Appbar </Text>
                    </Accordion.Control>
                    <Accordion.Panel style={{backgroundColor: 'var(--mantine-color-gary-1)'}}>
                        <ScrollArea h={height - 370} scrollbarSize={3}>
                            <Suspense fallback="Loading...">

                                <AppbarLayouts/>

                            </Suspense>
                        </ScrollArea>

                    </Accordion.Panel>
                </Accordion.Item>
                <Accordion.Item mb={10} style={{borderTop: '1px solid var(--mantine-color-gray-2)', borderRadius: 'var(--mantine-radius-sm)'}} value={`Navbar`}>
                    <Accordion.Control icon={<IconLayoutBottombar stroke={1}/>}>
                        <Text fw={700}> Navbar </Text>
                    </Accordion.Control>
                    <Accordion.Panel style={{backgroundColor: 'var(--mantine-color-gary-1)'}}>
                        <ScrollArea h={height - 370} scrollbarSize={3}>
                            <Suspense fallback="Loading...">

                                <NavbarLayouts />

                            </Suspense>
                        </ScrollArea>

                    </Accordion.Panel>
                </Accordion.Item>
                <Accordion.Item mb={10} style={{borderTop: '1px solid var(--mantine-color-gray-2)', borderRadius: 'var(--mantine-radius-sm)'}} value={`Drawer`}>
                    <Accordion.Control icon={<IconLayoutSidebarLeftExpand stroke={1}/>}>
                        <Text fw={700}> Drawer </Text>
                    </Accordion.Control>
                    <Accordion.Panel style={{backgroundColor: 'var(--mantine-color-gary-1)'}}>
                        <ScrollArea h={height - 370} scrollbarSize={3}>
                            <Suspense fallback="Loading...">

                                <DrawerLayouts />

                            </Suspense>
                        </ScrollArea>

                    </Accordion.Panel>
                </Accordion.Item>
            </Accordion>
        </ScrollArea>
    )
}