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

const DrawerLayouts = () => {

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


    const handleSelectedLayout = () => {
        dispatch(setSelectedComponent(activeDrawer));
        setActive(activeDrawer?.id)
    };
    const handleReloadDrawers = () => dispatch(fetchDrawers());



    useEffect(() => {
        dispatch(fetchActiveDrawer());
        dispatch(fetchDrawers())
    }, [dispatch, activeTheme, activeSupportPlugin]);


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

                <Box bg={theme.primaryColor + '.0'} p={5} my="var(--mantine-spacing-xs)"> <Text fz={12} fw={700}>Selected</Text> </Box>

                <Center>
                    { null !== activeDrawer && (
                        <Box
                            onClick={handleSelectedLayout}
                            data-active={active === activeDrawer?.id || undefined}
                            className={GlobalLayoutsStyle.item}
                            w={`30%`}
                        >
                            <Image fit="contain" src={activeDrawer?.image_url}/>
                            <Center><Tooltip label="Active"><IconSquareRoundedCheck color={theme.primaryColor}/></Tooltip></Center>

                        </Box>
                        )}
                </Center>

                <Box bg={theme.primaryColor + '.0'} p={5} my="var(--mantine-spacing-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={handleReloadDrawers}
                            >
                                <IconReload />
                            </ActionIcon>
                        </Tooltip>
                    </Flex>
                </Box>

                {
                    drawersRepo?.length > 0 && (
                        <Carousel
                            pos="relative"
                            slideSize="30%"
                            controlsOffset="lg"
                            controlSize={40}
                            loop
                            dragFree
                            draggable={false}
                            styles={{
                                control: {
                                    backgroundColor: theme.primaryColor,
                                    color: 'var(--mantine-color-black)',
                                }
                            }}
                        >
                                <LoadingOverlay visible={loading} zIndex={10} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ size: 'sm'}} />
                                { drawersRepo?.map((layout) => <_Layout key={layout.slug} layout={layout}/>) }

                        </Carousel>
                    )
                }

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

        </>


    );
}

export default DrawerLayouts;