import {
Accordion, ActionIcon,
Box,
Flex,
Grid,
Group,
LoadingOverlay,
Modal,
ScrollArea,
Tabs,
Text,
Title, Tooltip,
useMantineTheme
} from "@mantine/core";
import DashboardStyle from "../Dashboard.module.css";
import {
IconApps,
IconLayoutBottombar, IconLayoutNavbar,
IconLayoutSidebarLeftExpand,
IconMenu2,
IconReload,
IconSettings,
IconTemplate, IconXboxX
} from "@tabler/icons-react";
import * as TablerIcons from "@tabler/icons-react";
import {lazy, Suspense, useEffect, useState} from "@wordpress/element";
import axios from "axios";
import {useDisclosure, useFullscreen, useViewportSize} from "@mantine/hooks";
// import _PageRepositoryComponent from "./_PageRepositoryComponent";
// import AppbarLayouts from "./appbar/AppbarLayouts";
// import NavbarLayouts from "./navbar/NavbarLayouts";
// import DrawerLayouts from "./drawer/DrawerLayouts";
// import Settings from "./settings/Settings";
// import ThemeList from "./theme/ThemeList";
const _PageRepositoryComponent = lazy(() => import('./_PageRepositoryComponent'));
const AppbarLayouts = lazy(() => import('./appbar/AppbarLayouts'));
const NavbarLayouts = lazy(() => import('./navbar/NavbarLayouts'));
const DrawerLayouts = lazy(() => import('./drawer/DrawerLayouts'));
const Settings = lazy(() => import('./settings/Settings'));
const ThemeList = lazy(() => import('./theme/ThemeList'));
const DefaultSidebar = ({ isSupportPluginChange, setIsSupportPluginChange, isThemeChange, setThemeChange, reloadPageList ,setRecentAddedComponentId, activeScreen, selectedLayout, recallAppbar, setRecallAppbar, recallNavbar, recallDrawer, setRecallNavbar, setRecallDrawer, setReloadPageList, setSelectedLayout, setShowRightSidebar}) => {
const {height, width} = useViewportSize()
const global = [
{ link: "", label: "Appbar", slug: "appbar", icon: IconApps },
{ link: "", label: "Navbar", slug: "navbar", icon: IconMenu2 },
{ link: "", label: "Drawer", slug: "drawer", icon: IconLayoutSidebarLeftExpand },
];
const [activeTab, setActiveTab] = useState('global');
const [availableComponents, setAvailableComponents] = useState([]);
const [pageComponentLoading, setPageComponentLoading] = useState(false);
const [repositoryReload, setRepositoryReload] = useState(false);
const theme = useMantineTheme();
const [isOpenSettingsModal, handlesSettingsModal] = useDisclosure(false);
const [isOpenThemesModal, handlesThemesModal] = useDisclosure(false);
const { toggle, fullscreen } = useFullscreen();
const getComponentRepository = () => {
setPageComponentLoading(true);
axios({
method: 'get',
url: `${appLocalizer.apiUrl}/appza/web/api/v1/page/component-repository`,
headers: {
"Accept": `application/json`,
"Content-Type": `application/json`,
"Access-Control-Allow-Origin": '*',
},
params: {
page_slug: activeScreen
}
})
.then(res => {
setAvailableComponents(res.data);
setPageComponentLoading(false);
})
.catch(function (err) {
console.log(err);
});
}
useEffect(() => {
if (null !== activeScreen) {
getComponentRepository();
}
}, [activeScreen, repositoryReload, isThemeChange, isSupportPluginChange]);
useEffect(() => {
setRecallAppbar(prevState => !prevState);
}, [reloadPageList]);
return(
<>
{
setActiveTab(activeTab);
'global' === activeTab && setShowRightSidebar(false);
}}
styles={{
tab: {
width: `45%`
}
}}
>
Global
Components
}>
Appbar
}>
Navbar
}>
Drawer
Reload }
>
setRepositoryReload(prevState => !prevState)}
>
{/*{
availableComponents.length === 0 &&
}*/}
{
availableComponents &&
{
availableComponents?.map((group, index) => {
const ICON = TablerIcons[group?.icon] === undefined ? TablerIcons['IconDots'] : TablerIcons[group?.icon];
return (
}>
{group?.name}
{
group?.items?.map((component, index) => (
<_PageRepositoryComponent
key={component.id}
setRecentAddedComponentId={setRecentAddedComponentId}
component={component}
setShowRightSidebar={setShowRightSidebar}
setSelectedLayout={setSelectedLayout}
setReloadPageList={setReloadPageList}
/>
))
}
);
})
}
}
Settings
Themes
Settings
{/**/}
}>
Themes
}>
);
}
export default DefaultSidebar;