import {Button, Flex, Image, Overlay, rem, Text} from "@mantine/core";
import {Carousel} from "@mantine/carousel";
import {useHover} from "@mantine/hooks";
import {useState} from "@wordpress/element";
import {notifications} from "@mantine/notifications";
import axios from "axios";
import {IconAlertTriangle, IconCheck} from "@tabler/icons-react";

export default function _Layout({layout, setRecallDrawer, setSelectedLayout, setShowRightSidebar}){
    const { hovered, ref} = useHover();
    const [isDisabled, setDisabled] = useState(false);

    const addDrawer = () => {
        setDisabled(prevState => !prevState);

        const notificationId = notifications.show({
            color: 'var(--mantine-color-orange-2)',
            loading: true,
            title: 'Processing...',
            autoClose: false,
            withCloseButton: false,
        });

        axios({
            method: 'post',
            url: `${appLocalizer.apiUrl}/appza/web/api/v1/global-layout`,
            headers: {
                "Accept": `application/json`,
                "Content-Type": `application/json`,
                "Access-Control-Allow-Origin": '*',
                "X-WP-Nonce": `${appLocalizer.nonce}`
            },
            data: layout
        })
            .then(res => {
                notifications.update({
                    id: notificationId,
                    color: 'var(--mantine-color-orange-7)',
                    title: 'Added!',
                    icon: <IconCheck style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,

                });
                setDisabled(prevState => !prevState);
                setRecallDrawer(prevState => !prevState);
                setSelectedLayout(res.data);
                setShowRightSidebar(true);

            })
            .catch(function (err) {
                console.log(err);
                notifications.update({
                    id: notificationId,
                    color: 'var(--mantine-color-red-9)',
                    title: err.response.data.message,
                    icon: <IconAlertTriangle style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,

                });
                setDisabled(prevState => !prevState);
            });

    }

    return(
        <Carousel.Slide
            mx={5}
            key={layout.id}
            ref={ref}
            pos="relative"
        >
            {
                hovered && (
                    <Overlay>
                        <Flex
                            align="center"
                            justify="center"
                            gap="md"
                            mih={`100%`}
                        >

                            {
                                layout?.is_upcoming && <Text c="orange.1" fs="italic" fw={500}>Coming soon...</Text>
                            }

                            {
                                !layout?.is_upcoming && (isDisabled ? <Text fz="xs" c={`orange.1`} fw={100} fs="italic">Processing...</Text> : <Button size="xs" onClick={addDrawer} disabled={isDisabled} variant="filled">Select</Button>)
                            }


                        </Flex>
                    </Overlay>
                )
            }
            <Image
                // w="auto"
                fit="contain"
                src={layout?.image_url}
            />
        </Carousel.Slide>
    )
}