import { LoadingOverlay, Button, Center, useMantineTheme, Box} from "@mantine/core";
import { useEffect} from "@wordpress/element";
import {IconReload} from "@tabler/icons-react";
import {Carousel} from "@mantine/carousel";
import _ThemeCard from "./inc/_ThemeCard";
import {useDispatch, useSelector} from "react-redux";
import {fetchThemes} from "../../../features/themes/themeThunks";
const ThemeList = ({ isOnboarding, slideHeight }) => {
    const theme = useMantineTheme();

    const dispatch = useDispatch();
    const { themes, loading } = useSelector((state) => state.themes);



    const handleReloadThemes = () => dispatch(fetchThemes());


    useEffect(() => {
        dispatch(fetchThemes())
    }, [dispatch]);


    return(
        <>
            <Box pos="relative">
                <LoadingOverlay visible={loading} zIndex={1000} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ size: 'sm' }} />

                {themes.length === 0 && <Center h={slideHeight}>
                    <Button variant="outline" size="xs" onClick={handleReloadThemes} leftSection={<IconReload />}>Reload</Button>
                </Center>}

                {
                    themes.length > 0 && (
                        <Carousel
                            // slideSize="23%"
                            slideSize="25%"
                            slideGap="sm"
                            align="start"
                            controlSize={40}
                            styles={{
                                root: {
                                    // height: '100%',
                                },
                                viewport: {
                                    // height: 'inherit',
                                },
                                container: {
                                    // height: 'inherit',
                                },
                                control: {
                                    backgroundColor: theme.primaryColor,
                                    color: 'var(--mantine-color-black)',
                                }
                            }}
                        >
                            {themes?.map((theme, index) => <_ThemeCard key={index} slideHeight={slideHeight} themeData={theme} isOnboarding={isOnboarding}/>)}
                        </Carousel>
                    )
                }
            </Box>
        </>

    );
}

export default ThemeList;