import {
    Accordion,
    ActionIcon,
    Grid,
    Group,
    LoadingOverlay,
    ScrollArea,
    Text,
    Tooltip,
    useMantineTheme
} from "@mantine/core";
import {IconReload} from "@tabler/icons-react";
import * as TablerIcons from "@tabler/icons-react";
import {lazy, Suspense, useEffect} from "@wordpress/element";
import {useDispatch, useSelector} from "react-redux";
import {fetchComponents} from "../../../features/componentsRepo/componentsRepoThunks";
import {useViewportSize} from "@mantine/hooks";


const _PageRepositoryComponent = lazy(() => import('./_PageRepositoryComponent'));

export default function ScreenComponents(){
    const {height, width} = useViewportSize();
    const theme = useMantineTheme();


    const dispatch = useDispatch();

    const {componentsRepo, loading} = useSelector((state) => state.componentsRepo);
    const {activeScreen} = useSelector((state) => state.screens);
    const {activeSupportPlugin} = useSelector((state => state.config));



    const handleReload = () => dispatch(fetchComponents(activeScreen))


    useEffect(() => {
        dispatch(fetchComponents(activeScreen));
    }, [activeScreen, dispatch, activeSupportPlugin]);

    return (
        <ScrollArea h={height - 188} scrollbarSize={3} pos="relative">
            <Tooltip
                color={theme.primaryColor + '.1'}
                label={ <Text c={theme.colors.dark[7]} fw={500} size="sm">Reload</Text> }
            >
                <ActionIcon
                    variant="light"
                    size="xs"
                    pos="absolute"
                    bottom={0}
                    right={0}
                    onClick={handleReload}
                >
                    <IconReload />
                </ActionIcon>
            </Tooltip>
            <LoadingOverlay visible={loading} zIndex={100} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ size: 'sm' }} />
            {
                componentsRepo?.length > 0 &&
                <Accordion
                    chevronPosition="right"
                    variant="contained"
                    mb="xs"
                    defaultValue=""
                    styles={{
                        content: {
                            padding: 5
                        }
                    }}
                >
                    {
                        componentsRepo?.map((group, index) => {
                            const ICON = TablerIcons[group?.icon] === undefined ? TablerIcons['IconDots'] : TablerIcons[group?.icon];

                            return (
                                <Accordion.Item mb={10} style={{borderTop: '1px solid var(--mantine-color-gray-2)', borderRadius: 'var(--mantine-radius-sm)'}} value={group?.name}>
                                    <Accordion.Control icon={<ICON stroke={1}/>}>
                                        <Group wrap="nowrap">
                                            <Text fw={700}>{group?.name}</Text>
                                        </Group>
                                    </Accordion.Control>
                                    <Accordion.Panel style={{backgroundColor: 'var(--mantine-color-gary-1)'}}>
                                        <ScrollArea h={height - 370} scrollbarSize={3} pos="relative">
                                            <Grid gutter={0}>

                                                {
                                                    group?.items?.map((component, index) => (
                                                        <Suspense fallback="Loading...">
                                                            <_PageRepositoryComponent key={component.id} component={component}/>
                                                        </Suspense>
                                                    ))
                                                }
                                            </Grid>
                                        </ScrollArea>
                                    </Accordion.Panel>
                                </Accordion.Item>
                            );
                        })
                    }
                </Accordion>
            }

        </ScrollArea>
    )
}