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

const AppbarLayouts = () => {

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


    const handleSelectedLayout = () => {
        dispatch(setSelectedComponent(activeAppbar));
        setActive(activeAppbar?.id)
    };
    const handleReloadAppbars = () => dispatch(fetchAppbars());

    useEffect(() => {
        // dispatch(fetchActiveAppbar());
        dispatch(fetchAppbars())
    }, [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 !== activeAppbar && (
                    <>
                        <Box
                            className={GlobalLayoutsStyle.item}
                            p={15}
                            // mb={10}
                            onClick={handleSelectedLayout}
                            data-active={active === activeAppbar?.id || undefined}
                            style={{borderBottom: `1px solid var(--mantine-color-gray-2)`}}
                        >
                            <Image
                                mb={10}
                                h={56}
                                w={`100%`}
                                src={activeAppbar?.image_url}
                                fit="contain"
                                alt={activeAppbar?.name}

                            />
                            <Center>
                                <Text>{activeAppbar?.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={handleReloadAppbars}
                            >
                                <IconReload />
                            </ActionIcon>
                        </Tooltip>
                    </Flex>
                </Box>

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

                </Box>


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

            </Stack>

        </>
    );
}

export default AppbarLayouts;