import {Button, Flex, Image, Overlay, rem, Text} from "@mantine/core";
import {Carousel} from "@mantine/carousel";
import {useDisclosure, useHover} from "@mantine/hooks";
import {notifications} from "@mantine/notifications";
import {IconAlertTriangle, IconCheck} from "@tabler/icons-react";
import {addDrawer} from "../../../../features/globalComponents/globalComponentsThunks";
import {useDispatch} from "react-redux";

export default function _Layout({layout}){
    const { hovered, ref} = useHover();
    const [isDisable, toggleDisable] = useDisclosure(false);

    const dispatch = useDispatch();

    const handleAdd = () => {
        toggleDisable.open();
        dispatch(addDrawer(layout))
            .unwrap()
            .then(res => {
                notifications.show({
                    color: 'var(--mantine-color-orange-7)',
                    title: 'Added!',
                    icon: <IconCheck style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,
                });
            })
            .catch(err => {
                console.log(err);
                notifications.show({
                    color: 'var(--mantine-color-red-9)',
                    title: err.message,
                    icon: <IconAlertTriangle style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,
                });
            })
            .finally(() => {
                toggleDisable.close()
            });
    }
    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 && (isDisable ?
                                    <Text fz="xs" c={`orange.1`} fw={100} fs="italic">Processing...</Text> :
                                    <Button size="xs" onClick={handleAdd} disabled={isDisable} variant="filled">Select</Button>)
                            }


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