import GlobalLayoutsStyle from "../GlobalLayouts.module.css";

import {
    ActionIcon,
    Box, Button, Center, Flex, Image, LoadingOverlay, Stack, Text, Tooltip, useMantineTheme
} from "@mantine/core";
import {
    IconReload,
    IconSquareRoundedCheck
} from "@tabler/icons-react";
import {useEffect, useState} from "@wordpress/element";
import _Layout from "./_Layout";
import {useDispatch, useSelector} from "react-redux";
import {setSelectedComponent} from "../../../../features/selectedComponent/selectedComponentSlice";
import {
    fetchActiveNavbar,
    fetchNavbars
} from "../../../../features/globalComponents/globalComponentsThunks";

const NavbarLayouts = () => {

    const theme = useMantineTheme();
    const dispatch = useDispatch();
    const {activeNavbar} = useSelector(state => state.activeNavbar);
    const {activeTheme} = useSelector((state => state.activeTheme));
    const {activeSupportPlugin} = useSelector((state => state.config));
    const {navbarsRepo, loading} = useSelector(state => state.navbarsRepo);
    const [active, setActive] = useState(null);


    const handleSelectedLayout = () => {
        dispatch(setSelectedComponent(activeNavbar));
        setActive(activeNavbar?.id)
    };
    const handleReloadNavbars = () => dispatch(fetchNavbars());




    useEffect(() => {
        // dispatch(fetchActiveNavbar());
        dispatch(fetchNavbars())
    }, [dispatch, activeTheme, activeSupportPlugin]);

    return(
        <>
            <Stack pos="relative">

                <Box bg={theme.primaryColor + '.0'} p={5} mt={`xs`}> <Text fz={12} fw={700}>Selected</Text> </Box>

                {null !== activeNavbar && (
                    <>
                        <Box
                            className={GlobalLayoutsStyle.item}
                            p={15}
                            key={activeNavbar?.slug}
                            onClick={handleSelectedLayout}
                            data-active={active === activeNavbar?.id || undefined}
                            style={{borderBottom: `1px solid var(--mantine-color-gray-2)`}}
                        >
                            <Image
                                mb={10}
                                h={56}
                                w={`100%`}
                                src={activeNavbar?.image_url}
                                fit="contain"
                            />
                            <Center>
                                <Text>{activeNavbar?.name}</Text>
                                <Tooltip label="Active"><IconSquareRoundedCheck color={theme.primaryColor}/></Tooltip>
                            </Center>
                        </Box>
                    </>

                )}

                <Box bg={theme.primaryColor + '.0'} p={5} mt={`xs`}>
                    <Flex
                        align="center"
                        justify="space-between"
                    >
                        <Text fz={12} fw={700}>Library</Text>
                        <Tooltip
                            color={theme.primaryColor + '.1'}
                            label={ <Text c={theme.colors.dark[7]} fw={500} size="sm">Reload</Text> }
                        >
                            <ActionIcon
                                variant="light"
                                size="xs"
                                onClick={handleReloadNavbars}
                            >
                                <IconReload />
                            </ActionIcon>
                        </Tooltip>
                    </Flex>
                </Box>

                <Box pos="relative">
                    <LoadingOverlay visible={loading} zIndex={10} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ size: 'sm' }} />
                    {
                        navbarsRepo?.length > 0 && navbarsRepo?.map(layout => <_Layout key={layout.slug} layout={layout}/>)
                    }
                </Box>


                {
                    navbarsRepo?.length === 0 && <Center>
                        <Button size="xs" onClick={handleReloadNavbars} leftSection={<IconReload />}>Reload</Button>
                    </Center>
                }


            </Stack>

        </>

    );
}

export default NavbarLayouts;