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

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


    const dispatch = useDispatch();


    const handleAdd = () => {
        toggleDisable.open();
        dispatch(addAppbar(layout))
            .unwrap()
            .then()
            .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 (
        <Box
            p={15}
            style={{borderBottom: `1px solid var(--mantine-color-gray-2)`}}
            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
                mb={10}
                h={56}
                w={`100%`}
                src={layout?.image_url}
                fit="contain"
            />
            <Center><Text>{layout.name}</Text></Center>
        </Box>
    )
}