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

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

    const addAppbar = () => {
        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);
                setRecallAppbar(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 (
        <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 && (isDisabled ? <Text fz="xs" c={`orange.1`} fw={100} fs="italic">Processing...</Text> : <Button size="xs" onClick={addAppbar} disabled={isDisabled} 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>
    )
}