import { Button, Flex, Grid, Image, Overlay, rem, Text, useMantineTheme} from "@mantine/core";
import {useHover} from "@mantine/hooks";
import {notifications} from "@mantine/notifications";
import axios from "axios";
import {IconAlertTriangle, IconCheck, IconX} from "@tabler/icons-react";
import {useState} from "@wordpress/element";
import {RESTRICTED_PAGES} from "../../../utils/constant";

const _PageRepositoryComponent = ({setRecentAddedComponentId, component, setReloadPageList, setShowRightSidebar, setSelectedLayout}) => {
    const { hovered, ref} = useHover();
    const [isDisabled, setIsDisabled] = useState(false);
    const theme = useMantineTheme();

    const addComponent = () => {

        setIsDisabled(true);

        const notificationId = notifications.show({
            color: 'var(--mantine-color-orange-2)',
            loading: true,
            title: 'Please wait...',
            autoClose: false,
            withCloseButton: false,
        });
        axios({
            method: 'post',
            url: `${appLocalizer.apiUrl}/appza/web/api/v1/page/component`,
            headers: {
                "Accept": `application/json`,
                "Content-Type": `application/json`,
                "Access-Control-Allow-Origin": '*',
                "X-WP-Nonce": `${appLocalizer.nonce}`
            },
            data: component
        })
            .then(res => {
                setRecentAddedComponentId(res?.data?.id)
                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,

                });
                setReloadPageList(prevState => !prevState);
                setIsDisabled(false);
                setSelectedLayout(res?.data);

                if(RESTRICTED_PAGES.includes(res?.data?.page_slug)){
                    setShowRightSidebar(false);
                }else {
                    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,

                });
                setIsDisabled(false);
            });
    }

    return (
        <Grid.Col span={6} p={5}>
            <Flex
                direction="column"
                justify="center"
                align="center"
                bg="white"
                p={5}
                pos="relative"
                ref={ref}
                style={{
                    boxShadow: 'var(--mantine-shadow-sm)',
                }}
            >

                <Text fz={12}>{component?.name}</Text>
                <Image fit="contain" src={component?.component_image}/>
                {
                    hovered && (
                        <Overlay>
                            <Flex
                                align="center"
                                justify="center"
                                gap="md"
                                mih={`100%`}
                            >
                                {component?.is_upcoming ? <Text c={`${theme.primaryColor}.1`} fs="italic" fw={500}>Coming soon...</Text> : <Button size="xs" onClick={addComponent} variant="filled" disabled={isDisabled}><Text c="white">Add</Text></Button>}


                            </Flex>
                        </Overlay>
                    )
                }
            </Flex>
        </Grid.Col>
    );
}

export default _PageRepositoryComponent;