import {ActionIcon, Box, Flex, Group, Image, LoadingOverlay, Overlay, useMantineTheme} from "@mantine/core";
import {useHover, useViewportSize} from "@mantine/hooks";
import {IconEdit, IconHandStop, IconX} from "@tabler/icons-react";
import axios from "axios";
import {modals} from "@mantine/modals";
import {RESTRICTED_PAGES} from "../../../../utils/constant";

import ComponentStyle from "./components/Style.module.css";
import _PopularProduct from "./components/_PopularProduct";
import _Category from "./components/_Category";
import _Collections from "./components/_Collections";
import _ProductWithCategory from "./components/_ProductWithCategory";
import _CartItem from "./components/_CartItem";
import _BannerSlider from "./components/_BannerSlider";
import _Category5 from "./components/_Category5";
import _HotSalesProduct from "./components/_HotSalesProduct";
import _RecentlyViewed from "./components/_RecentlyViewed";
import _CartItem3 from "./components/_CartItem3";
import _Products from "./components/_Products";
import _SearchImageComponent from "./components/_SearchImageComponent";
import _Category3 from "./components/_Category3";
import _Category7 from "./components/_Category7";
import _CategoryWithProductTheme5 from "./components/_CategoryWithProductTheme5";
import _Text from "./components/_Text";
import _CategoryDiscoverByArea from "./components/_CategoryDiscoverByArea";
import _CategoryDiscountOffers from "./components/_CategoryDiscountOffers";
import _CategoryTrendingItems from "./components/_CategoryTrendingItems";
import _ProductShowingResults from "./components/_ProductShowingResults";
import _CartItem2 from "./components/_CartItem2";
import _CartItem4 from "./components/_CartItem4";
import _CartItem5 from "./components/_CartItem5";
import _CartItem6 from "./components/_CartItem6";
import _CategoryWithProduct from "./components/_CategoryWithProduct";
import _AllProducts from "./components/_AllProducts";
import _Posts from "./components/_Posts";
import _CourseList1 from "./components/_CoursesList1";
import _CourseList2 from "./components/_CourseList2";
import _CourseList3 from "./components/_CourseList3";
import _CourseList4 from "./components/_CourseList4";
import _CourseList5 from "./components/_CourseList5";
import _CourseList6 from "./components/_CourseList6";
import _ProductByCategory1 from "./components/_ProductByCategory1";
import _ProductByCategory2 from "./components/_ProductByCategory2";
import _ProductByCategory3 from "./components/_ProductByCategory3";
import _ProductByCategory4 from "./components/_ProductByCategory4";
import _ProductByCategory5 from "./components/_ProductByCategory5";
import _ProductByCategory6 from "./components/_ProductByCategory6";


const _Component = ({provided, setSelectedLayout, setShowRightSidebar, component, activeScreen, handlers, setReloadPageList, recentAddedComponentId}) => {
    const {height, width} = useViewportSize();
    const { hovered, ref} = useHover();
    const theme = useMantineTheme();

    const removeComponent = (event) => {
        event.stopPropagation();

        modals.openConfirmModal({
            title: 'Are you sure?',
            centered: true,
            children: "",
            labels: {confirm: 'Yes', cancel: "No"},
            confirmProps: {color: theme.primaryColor},
            withCloseButton: false,
            overlayProps: {
                blur: 1,
            },
            closeOnClickOutside: false,
            onCancel: () => console.log('Cancel'),
            onConfirm: () => {
                axios({
                    method: 'delete',
                    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: {id: component.id}
                })
                    .then(res => {
                        handlers.filter(item => item.id !== component.id);
                        setReloadPageList(prevState => !prevState);
                        setShowRightSidebar(false);

                    })
                    .catch(function (err) {
                        console.log(err);
                    });
            }
        });



    }

    return (

        <>
            <Box w={height < 850 ? 330 : 380} mih={50} className={ComponentStyle.mainArea} pos="relative" ref={ref} style={ recentAddedComponentId == component.id ? {border: "3px solid var(--mantine-color-orange-3)"} : {}} >

                {/*Wp core*/}
                { 'blog-3' === component.slug && <_Posts component={component} /> }

                {/*Woocommerce*/}
                { 'popular' === component.slug && <_PopularProduct component={component} /> }
                { 'popular-2' === component.slug && <_PopularProduct component={component} /> }
                { 'products' === component.slug && <_Products component={component} /> }
                { 'popular-shoes' === component.slug && <_Products component={component} /> }
                { 'all-shoes' === component.slug && <_AllProducts component={component} /> }
                { 'category-with-product-theme-5' === component.slug && <_CategoryWithProductTheme5 component={component} /> }
                { 'category-with-product-2-theme-5' === component.slug && <_CategoryWithProductTheme5 component={component} /> }
                { 'discounts-offers' === component.slug && <_CategoryDiscountOffers component={component} /> }
                { 'trending-items' === component.slug && <_CategoryTrendingItems component={component} /> }
                { 'categories' === component.slug && <_Category component={component} /> }
                { 'category-1' === component.slug && <_Category component={component} /> }
                { 'category-2' === component.slug && <_Category component={component} /> }
                { 'category-3' === component.slug && <_Category3 component={component} /> }
                { 'category-5' === component.slug && <_Category5 component={component} /> }
                { 'category-4' === component.slug && <_Category5 component={component} /> }
                { 'category-6' === component.slug && <_Category5 component={component} /> }
                { 'category-7' === component.slug && <_Category7 component={component} /> }
                { 'category-8' === component.slug && <_Category7 component={component} /> }
                { 'discover-by-area' === component.slug && <_CategoryDiscoverByArea component={component} /> }
                { 'select-category' === component.slug && <_Category5 component={component} /> }
                { 'collections' === component.slug && <_Collections component={component} /> }
                { 'product-with-category' === component.slug && <_ProductWithCategory component={component} /> }
                { 'category-with-product' === component.slug && <_CategoryWithProduct component={component} /> }
                { 'cart-page-1' === component.slug && <_CartItem component={component} /> }
                { 'cart-page-2' === component.slug && <_CartItem2 component={component} /> }
                { 'cart-page-3' === component.slug && <_CartItem3 component={component} /> }
                { 'cart-page-4' === component.slug && <_CartItem4 component={component} /> }
                { 'cart-page-5' === component.slug && <_CartItem5 component={component} /> }
                { 'cart-page-6' === component.slug && <_CartItem6 component={component} /> }
                { 'banner-slider-1' === component.slug && <_BannerSlider component={component} /> }
                { 'new-arrivals' === component.slug && <_BannerSlider component={component} /> }
                { 'banner-slider-component-theme-6' === component.slug && <_BannerSlider component={component} /> }
                { 'hot-sales' === component.slug && <_HotSalesProduct component={component} /> }
                { 'all-products' === component.slug && <_HotSalesProduct component={component} /> }
                { 'hot-sales-2' === component.slug && <_HotSalesProduct component={component} /> }
                { 'recently-viewed' === component.slug && <_RecentlyViewed component={component} /> }
                { 'search-image-component' === component.slug && <_SearchImageComponent component={component} /> }
                { 'search-image-component-2' === component.slug && <_SearchImageComponent component={component} /> }
                { 'search-image-component-3' === component.slug && <_SearchImageComponent component={component} /> }
                { 'search-image-component-4' === component.slug && <_SearchImageComponent component={component} /> }
                { 'showing-results' === component.slug && <_Text component={component} /> }
                { 'showing-results-2' === component.slug && <_ProductShowingResults component={component} /> }
                { 'discover-your-best-gadget' === component.slug && <_Text component={component} /> }
                { 'category-product-list' === component.slug && <_ProductByCategory1 component={component} /> }
                { 'product-by-category-2' === component.slug && <_ProductByCategory2 component={component} /> }
                { 'product-by-category-3' === component.slug && <_ProductByCategory3 component={component} /> }
                { 'product-by-category-4' === component.slug && <_ProductByCategory4 component={component} /> }
                { 'product-by-category-5' === component.slug && <_ProductByCategory5 component={component} /> }
                { 'product-by-category-6' === component.slug && <_ProductByCategory6 component={component} /> }

                {/*TutorLMS*/}
                { 'tutor-course-1' === component.slug && <_CourseList1 component={component} /> }
                { 'course-list-2' === component.slug && <_CourseList2 component={component} /> }
                { 'course-list-3' === component.slug && <_CourseList3 component={component} /> }
                { 'course-list-4' === component.slug && <_CourseList4 component={component} /> }
                { 'course-list-5' === component.slug && <_CourseList5 component={component} /> }
                { 'course-list-6' === component.slug && <_CourseList6 component={component} /> }


                { RESTRICTED_PAGES.includes(activeScreen) && <Image src={component?.image_url} fit="contain"/> }

                {
                    hovered && (
                        <Overlay
                            // display="none"
                            color="#FFE8CC"
                            backgroundOpacity={0.35}
                            blur={0}
                            onClick={() => {
                                if (!RESTRICTED_PAGES.includes(activeScreen)) {
                                    setShowRightSidebar(true);
                                    setSelectedLayout(component);
                                }

                            }}
                            zIndex={1}
                        >
                            <Flex justify="space-between" align="flex-start" gap={0}>
                                <ActionIcon
                                    variant="filled"
                                    disabled={RESTRICTED_PAGES.includes(activeScreen)}
                                >
                                    <div {...provided.dragHandleProps} >
                                        <IconHandStop color="var(--mantine-color-white)" cursor={RESTRICTED_PAGES.includes(activeScreen) ? 'not-allowed' : 'grab'} />
                                    </div>
                                </ActionIcon>
                                <Group justify="flex-end" gap={2}>
                                    <ActionIcon
                                        disabled={RESTRICTED_PAGES.includes(activeScreen)}
                                        variant="filled"
                                        onClick={() => {
                                            setShowRightSidebar(true);
                                            setSelectedLayout(component);
                                        }}
                                    >
                                        <IconEdit color="var(--mantine-color-white)" cursor={RESTRICTED_PAGES.includes(activeScreen) ? 'not-allowed' : 'pointer'} />
                                    </ActionIcon>

                                    <ActionIcon variant="filled" onClick={removeComponent}>
                                        <IconX color="var(--mantine-color-white)" cursor="pointer" />
                                    </ActionIcon>
                                </Group>
                            </Flex>
                        </Overlay>
                    )
                }
            </Box>

        </>

    )
}

export default _Component;