import { LoadingOverlay, Button, Center, useMantineTheme, Box} from "@mantine/core";
import axios from "axios";
import {useState, useEffect} from "@wordpress/element";
import {useDisclosure, useViewportSize} from '@mantine/hooks';
import {IconReload} from "@tabler/icons-react";
import {Carousel} from "@mantine/carousel";
import _ThemeCard from "./inc/_ThemeCard";
const ThemeList = ({ setThemeChange, isOnboarding, slideHeight }) => {
    const {height, width} = useViewportSize();
    const theme = useMantineTheme();


    const [themes, setThemes] = useState([]);
    const [isLoading, handlers] = useDisclosure(false);
    const [isReloadThemes, reloadThemesHandlers] = useDisclosure(false);
    const [activeTheme, setActiveTheme] = useState({});

    const getActiveTheme = () => {
        axios({
            method: 'get',
            url: `${appLocalizer.apiUrl}/appza/web/api/v1/active-theme`,
            headers: {
                "Accept": `application/json`,
                "Content-Type": `application/json`,
                "Access-Control-Allow-Origin": '*',
            },
        })
            .then(res => {
                setActiveTheme(res.data)

            })
            .catch(function (err) {
                console.log(err);
            });

    }
    const getThemes = () => {
        handlers.open();
        axios({
            method: 'get',
            url: `${appLocalizer.apiUrl}/appza/web/api/v1/themes`,
            headers: {
                "Accept": `application/json`,
                "Content-Type": `application/json`,
                "Access-Control-Allow-Origin": '*',
            },
        })
            .then(res => {
                setThemes(res.data);
                handlers.close();

            })
            .catch(function (err) {
                console.log(err);
            });

    }
    useEffect(()=>{
        getThemes();
        getActiveTheme();
    }, [isReloadThemes])

    return(
        <>
            {/*<Box pos="relative" h={height - 200}>*/}
            <Box pos="relative">
                {/*<LoadingOverlay visible={isLoading} zIndex={1000} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ type: 'dots', size: 'sm' }} />*/}
                <LoadingOverlay visible={isLoading} zIndex={1000} overlayProps={{ radius: "sm", blur: 5 }} loaderProps={{ size: 'sm' }} />

                {themes.length === 0 && <Center h={slideHeight}>
                    <Button variant="outline" size="xs" onClick={() => {reloadThemesHandlers.toggle()}} 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} setThemeChange={setThemeChange} isOnboarding={isOnboarding} activeTheme={activeTheme} setActiveTheme={setActiveTheme}/>)}
                        </Carousel>
                    )
                }
            </Box>
        </>

    );
}

export default ThemeList;