import { Button, Flex, Grid, Image, Overlay, rem, Text, useMantineTheme} from "@mantine/core";
import {useDisclosure, useHover} from "@mantine/hooks";
import {notifications} from "@mantine/notifications";
import {IconAlertTriangle, IconCheck} from "@tabler/icons-react";
import {addComponent} from "../../../features/pageComponents/componentsThunks";
import {useDispatch} from "react-redux";

const _PageRepositoryComponent = ({ component}) => {
    const theme = useMantineTheme();
    const { hovered, ref} = useHover();
    const [disabled, disableToggle] = useDisclosure(false);



    const dispatch = useDispatch();
    const handleAdd = () => {
        disableToggle.open();

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

        dispatch(addComponent(component))
            .unwrap()
            .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: 1000,
                    withCloseButton: true,

                });
            })
            .catch(err => {
                notifications.update({
                    id: notificationId,
                    color: 'var(--mantine-color-red-7)',
                    title: err.message || 'Something went wrong, please try again.',
                    icon: <IconAlertTriangle style={{ width: rem(18), height: rem(18) }} />,
                    loading: false,
                    autoClose: 5000,
                    withCloseButton: true,
                });
            })
            .finally(() => {
                disableToggle.close();
            })
    }

    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={handleAdd} variant="filled" disabled={disabled}><Text c="white">Add</Text></Button>}


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

export default _PageRepositoryComponent;