import {
    ActionIcon,
    Box,
    Flex,
    LoadingOverlay,
    Modal,
    Tabs,
    Text,
    Title,
    useMantineTheme
} from "@mantine/core";

import DashboardStyle from "../Dashboard.module.css";
import {
    IconBellRinging,
    IconHistory,
    IconLayersIntersect,
    IconLock,
    IconSettings, IconSettingsPlus, IconSocial, IconSticker,
    IconTemplate, IconTool, IconXboxX
} from "@tabler/icons-react";
import {lazy, Suspense} from "@wordpress/element";
import {useDisclosure, useFullscreen, useViewportSize} from "@mantine/hooks";
import GlobalComponents from "./GlobalComponents";
import {useDispatch, useSelector} from "react-redux";
import {setSelectedComponent} from "../../../features/selectedComponent/selectedComponentSlice";
import BlockActivityWaitLoader from "../../../utils/loader/BlockActivityWaitLoader";


const ScreenComponents = lazy(() => import('./ScreenComponents'));
const GeneralSettings = lazy(() => import('../settings/GeneralSettings'));
const IntegrationSettings = lazy(() => import('../settings/IntegrationSettings'));
const AppStoreSettings = lazy(() => import('../settings/AppStoreSettings'));
const ThemeList = lazy(() => import('../theme/ThemeList'));
const NotificationSettings = lazy(() => import('../settings/NotificationSettings'));
const SocialLoginSettings = lazy(() => import('../settings/SocialLoginSettings'));

const DefaultSidebar = () => {
    const theme = useMantineTheme();

    const { toggle, fullscreen } = useFullscreen();
    const {height, width} = useViewportSize();
    const dispatch = useDispatch();

    const [openedSettingsModal, handlersSettingsModal] = useDisclosure(false);
    const [openedThemesModal, handlersThemesModal] = useDisclosure(false);

    const {viewMode} = useSelector(state => state.viewMode);
    const {blockActivity} = useSelector(state => state.blockActivity)

    if ('preview' === viewMode) return false;

    return(
        <>
            <Tabs
                px="sm"
                pb="sm"
                pt="xs"
                bg="#ffffff"
                // h="100%"
                variant="pills"
                defaultValue="global-components"
                onChange={ activeTab => 'global' === activeTab && dispatch(setSelectedComponent(null))}
                styles={{
                    tab: {
                        width: `45%`
                    }
                }}
            >
                <Tabs.List grow justify="center" bg={theme.primaryColor + '.0'} mb="xs" style={{borderRadius: 'var(--mantine-radius-sm)'}}>
                    <Tabs.Tab value="global-components">Global Components</Tabs.Tab>
                    <Tabs.Tab value="screen-components">Screen Components</Tabs.Tab>
                </Tabs.List>
                <Tabs.Panel value="global-components">
                    <Suspense
                        fallback={ <LoadingOverlay visible={true} zIndex={100} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ size: 'sm' }} />}
                    >
                        <GlobalComponents/>
                    </Suspense>

                </Tabs.Panel>
                <Tabs.Panel value="screen-components">
                    <Suspense
                        fallback={ <LoadingOverlay visible={true} zIndex={100} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ size: 'sm' }} />}
                    >
                        <ScreenComponents/>
                    </Suspense>
                </Tabs.Panel>
            </Tabs>

            <Box h={1} w="100%" bg="gray.2"></Box>

            <Flex
                direction="row"
                align="center"
                justify="space-around"
                py="md"
                bg="#ffffff"
            >
                <Flex
                    direction="column"
                    align="center"
                    justify="space-between"
                    className={DashboardStyle.leftBarFooterItem}
                    onClick={handlersSettingsModal.open}
                >
                    <IconSettings
                        stroke={1.5}
                        style={{ justifyContent: "center", alignItems: "center" }}
                    />
                    <Text textAlign="center">Settings</Text>
                </Flex>
                <Flex
                    direction="column"
                    align="center"
                    justify="center"
                    className={DashboardStyle.leftBarFooterItem}
                    onClick={handlersThemesModal.open}
                >
                    <IconTemplate stroke={1.5} />
                    <Text>Themes</Text>
                </Flex>
            </Flex>


            <Modal
                pos="relative"
                opened={openedSettingsModal}
                onClose={handlersSettingsModal.close}
                size="100%"
                closeOnClickOutside={false}
                withCloseButton={false}
                styles={{
                    inner: {
                        paddingLeft: `${fullscreen ? 'var(--mantine-spacing-sm)' : '45px'}`,
                        paddingRight: 'var(--mantine-spacing-sm)',
                    },
                    content: {
                        height: height - 10,
                    },
                    body: {
                        paddingTop: 0,
                        paddingBottom: 0,
                        height: '100%'
                    }
                }}
            >
                <Modal.Header p={0}>
                    <Modal.Title>
                        <Title order={3} data-autofocus>Settings</Title>
                    </Modal.Title>
                    <Modal.CloseButton>
                        <ActionIcon
                            disabled={blockActivity}
                            variant="light"
                            color={theme.colors.gray[5]}
                            onClick={handlersSettingsModal.close}
                        >
                            <IconXboxX stroke={1.5} />
                        </ActionIcon>
                    </Modal.CloseButton>
                </Modal.Header>


                <Tabs defaultValue="general" h={`92%`}>
                    {blockActivity && <BlockActivityWaitLoader/>}

                    <Tabs.List>
                        <Tabs.Tab leftSection={<IconSettings size={14}/>} value="general">General</Tabs.Tab>
                        <Tabs.Tab disabled={!window.appzaPremium} leftSection={<IconLock size={14}/>} value="license">License</Tabs.Tab>
                        <Tabs.Tab leftSection={<IconLayersIntersect size={14} />} value="integration">Integration</Tabs.Tab>
                        <Tabs.Tab leftSection={<IconTool size={14} />} value="app-store-config">App store config</Tabs.Tab>
                        <Tabs.Tab leftSection={<IconBellRinging size={14} />} value="notification">Notification</Tabs.Tab>
                        <Tabs.Tab leftSection={<IconSocial size={14} />} value="social-login">Social Login</Tabs.Tab>
                        <Tabs.Tab disabled leftSection={<IconSticker size={14} />} value="branding">Branding</Tabs.Tab>
                        <Tabs.Tab disabled={!window.appzaPremium} leftSection={<IconHistory size={14} />} value="build-history">Build History</Tabs.Tab>
                        <Tabs.Tab disabled leftSection={<IconSettingsPlus size={14} />} value="others">Others</Tabs.Tab>
                    </Tabs.List>

                    <Tabs.Panel value="general" pos="relative">
                        <Suspense fallback={<LoadingOverlay visible={true} zIndex={1000} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ size: 'sm' }} />}>
                            <GeneralSettings/>
                        </Suspense>
                    </Tabs.Panel>

                    <Tabs.Panel value="license" pos="relative">
                        <Suspense fallback={<LoadingOverlay visible={true} zIndex={1000} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ size: 'sm' }} />}>
                            {window.appzaPremium && <window.appzaPremium.LicenseArea theme={theme} />}
                        </Suspense>
                    </Tabs.Panel>

                    <Tabs.Panel value="integration" pos="relative">
                        <Suspense fallback={<LoadingOverlay visible={true} zIndex={1000} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ size: 'sm' }} />}>
                            <IntegrationSettings handlersSettingsModal={handlersSettingsModal} handlersThemesModal={handlersThemesModal}/>
                        </Suspense>
                    </Tabs.Panel>

                    <Tabs.Panel value="app-store-config" pos="relative">
                        <Suspense fallback={<LoadingOverlay visible={true} zIndex={1000} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ size: 'sm' }} />}>
                            <AppStoreSettings/>
                        </Suspense>
                    </Tabs.Panel>

                    <Tabs.Panel value="notification">
                        <Suspense fallback={<LoadingOverlay visible={true} zIndex={1000} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ size: 'sm' }} />}>
                            <NotificationSettings/>
                        </Suspense>
                    </Tabs.Panel>

                    <Tabs.Panel value="social-login">
                        <Suspense fallback={<LoadingOverlay visible={true} zIndex={1000} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ size: 'sm' }} />}>
                            <SocialLoginSettings/>
                        </Suspense>
                    </Tabs.Panel>

                    <Tabs.Panel value="branding">
                        <Text>Upcoming...</Text>
                    </Tabs.Panel>

                    <Tabs.Panel value="build-history" pos="relative">
                        <Suspense fallback={<LoadingOverlay visible={true} zIndex={1000} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ size: 'sm' }} />}>
                            {window.appzaPremium && <window.appzaPremium.BuildHistory theme={theme} />}
                        </Suspense>
                    </Tabs.Panel>

                    <Tabs.Panel value="others">
                        <Text>Upcoming...</Text>
                    </Tabs.Panel>

                </Tabs>
            </Modal>

            <Modal
                pos="relative"
                opened={openedThemesModal}
                onClose={handlersThemesModal.close}
                size="100%"
                closeOnClickOutside={false}
                withCloseButton={false}
                styles={{
                    inner: {
                        paddingLeft: `${fullscreen ? 'var(--mantine-spacing-sm)' : '45px'}`,
                        paddingRight: 'var(--mantine-spacing-sm)',
                    },
                    content: {
                        height: height - 10,
                    },
                    body: {
                        paddingTop: 0,
                        paddingBottom: 0
                    }
                }}
            >
                <Modal.Header p={0}>
                    <Modal.Title>
                        <Title order={3} data-autofocus>Themes</Title>
                    </Modal.Title>
                    <Modal.CloseButton>
                        <ActionIcon
                            disabled={blockActivity}
                            variant="light"
                            color={theme.colors.gray[5]}
                            onClick={handlersThemesModal.close}
                        >
                            <IconXboxX stroke={1.5} />
                        </ActionIcon>
                    </Modal.CloseButton>
                </Modal.Header>

                <Box pos="relative">

                    {blockActivity && <BlockActivityWaitLoader/>}

                    <Suspense fallback={<LoadingOverlay visible={true} zIndex={1000} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ size: 'sm' }} />}>
                        <ThemeList isOnboarding={false} slideHeight={`78vh`}/>
                    </Suspense>
                </Box>

            </Modal>





        </>

    );
}

export default DefaultSidebar;