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

import ComponentStyle from "./components/Style.module.css";
import _Image from "./components/_Image";
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";
import _FeedPost from "./components/fluent-community/_FeedPost";
import _Space from "./components/fluent-community/_Space";
import {removeComponent} from "../../../features/pageComponents/componentsThunks";
import {useDispatch, useSelector} from "react-redux";
import {setSelectedComponent} from "../../../features/selectedComponent/selectedComponentSlice";
import {modals} from "@mantine/modals";
import _Member1 from "./components/fluent-community/_Member1";
import _ProfileAbout from "./components/fluent-community/_ProfileAbout";
import _ProfileSocial from "./components/fluent-community/_ProfileSocial";
import _ProfileComment from "./components/fluent-community/_ProfileComment";
import _Notification1 from "./components/fluent-community/_Notification1";
import _FeedBanner1 from "./components/fluent-community/_FeedBanner1";
import _FeedLinkList from "./components/fluent-community/_FeedLinkList";
import _CreatePost1 from "./components/fluent-community/_CreatePost1";
import _SpaceDocuments1 from "./components/fluent-community/_SpaceDocuments1";
import _SchedulePostView from "./components/fluent-community/_SchedulePostView";
import _SchedulePostCount from "./components/fluent-community/_SchedulePostCount";
import _SchedulePost from "./components/fluent-community/_SchedulePost";
import _SpaceBanner from "./components/fluent-community/_SpaceBanner";
import _SpaceMember1 from "./components/fluent-community/_SpaceMember1";
import _ChatAddMember1 from "./components/fluent-community/_ChatAddMember1";
import _ChatList1 from "./components/fluent-community/_ChatList1";
import _LeaderboardLevel1 from "./components/fluent-community/_LeaderboardLevel1";
import _LeaderBoardProfile1 from "./components/fluent-community/_LeaderBoardProfile1";
import _LeaderboardMembers1 from "./components/fluent-community/_LeaderboardMembers1";
import _FCCourseList1 from "./components/fluent-community/_CourseList1";
import _SpaceLinkList1 from "./components/fluent-community/_SpaceLinkList1";
import _CourseInformation1 from "./components/fluent-community/_CourseInformation1";
import _CourseContent1 from "./components/fluent-community/_CourseContent1";
import _CourseInstructor1 from "./components/fluent-community/_CourseInstructor1";
import _EnrollButton1 from "./components/fluent-community/_EnrollButton1";
import _LessonInformation1 from "./components/fluent-community/_LessonInformation1";
import _LessonVideo1 from "./components/fluent-community/_LessonVideo1";
import _LessonDetails1 from "./components/fluent-community/_LessonDetails1";
import _LessonQuiz1 from "./components/fluent-community/_LessonQuiz1";
import _LessonDocuments1 from "./components/fluent-community/_LessonDocuments1";
import _LessonDiscussion1 from "./components/fluent-community/_LessonDiscussion1";

const _Component = ({provided, component}) => {
    const theme = useMantineTheme();
    const {height, width} = useViewportSize();
    const { hovered, ref} = useHover();

    const dispatch = useDispatch();

    const {activeScreen} = useSelector((state => state.screens));
    const {recentAddedComponentId} = useSelector((state => state.components));
    const {selectedComponent, copySelectedComponent} = useSelector((state => state.selectedComponent));
    const {viewMode} = useSelector(state => state.viewMode);

    const handleRemoveComponent = (e) => {
        e.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: () => {
                const {id} = component;
                dispatch(removeComponent(id));
            }
        });
    }

    const handleSelectComponent = (e) => {
        e.stopPropagation();

        if (!RESTRICTED_PAGES.includes(activeScreen)){

            if (JSON.stringify(selectedComponent) !== JSON.stringify(copySelectedComponent)) {
                modals.openConfirmModal({
                    title: '',
                    centered: true,
                    children: (
                        <Flex justify="center" align="center" gap="sm" w={`100%`} direction="column">
                            <Group gap="xs">
                                <IconAlertTriangle/>
                                <Text size="sm" fw={600}>Confirmation!</Text>
                            </Group>
                            <Divider size="xs" w={`100%`} />
                            <Text size="sm" c="#4D4D4D" ta="center" my={30}>
                                Are you sure you want to discard current changes?
                            </Text>
                        </Flex>

                    ),
                    labels: {confirm: "Yes", cancel: "Continue Edit" },

                    // confirmProps: {color: 'var(--mantine-color-gray-2)'},
                    confirmProps: {bg: theme.primaryColor, c: "#ffffff", style: {borderColor: theme.primaryColor}},
                    cancelProps: {bg: 'var(--mantine-color-gray-2)', c: '#202020'},
                    withCloseButton: false,
                    groupProps: {justify: 'center'},
                    overlayProps: {
                        blur: 1,
                    },
                    closeOnClickOutside: false,
                    onCancel: () => console.log('Cancel'),
                    onConfirm: () => {

                        dispatch(setSelectedComponent(selectedComponent))
                        // dispatch(setSelectedComponent(component));

                    }

                });
            } else {
                dispatch(setSelectedComponent(component))
            }

        }
    }

    return (

        <>
            <Box
                w="100%"
                mih={50}
                className={ComponentStyle.mainArea}
                pos="relative"
                ref={ref}
                style={{
                    border: parseInt(recentAddedComponentId) === parseInt(component.id) ? "3px solid var(--mantine-color-orange-3)" : "none",
                }}
            >
                { 'Image' === component.customize_properties.layout_type && <_Image component={component} /> }

                {/*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} /> }

                {/*FCommunity*/}
                { 'feed-post' === component.slug && <_FeedPost component={component} /> }
                { ('space' === component.slug || 'member-space-list-1' === component.slug) && <_Space component={component} /> }
                { 'member-1' === component.slug && <_Member1 component={component} /> }
                { 'profile-about-details' === component.slug && <_ProfileAbout component={component} /> }
                { 'profile-about-social-link' === component.slug && <_ProfileSocial component={component} /> }
                { 'profile-comment' === component.slug && <_ProfileComment component={component} /> }
                { 'notification-1' === component.slug && <_Notification1 component={component} /> }
                { 'feed-banner-1' === component.slug && <_FeedBanner1 component={component} /> }
                { 'feed-link-list-1' === component.slug && <_FeedLinkList component={component} /> }
                { 'create-post-1-2' === component.slug && <_CreatePost1 component={component} /> }
                { 'space-link-list-1' === component.slug && <_SpaceLinkList1 component={component} /> }
                { 'space-documents-1' === component.slug && <_SpaceDocuments1 component={component} /> }
                { 'schedule-post-view' === component.slug && <_SchedulePostView component={component} /> }
                { 'schedule-post-count' === component.slug && <_SchedulePostCount component={component} /> }
                { 'schedule-post' === component.slug && <_SchedulePost component={component} /> }
                { 'space-banner-1' === component.slug && <_SpaceBanner component={component} /> }
                { 'space-member-1' === component.slug && <_SpaceMember1 component={component} /> }
                { 'chat-add-member-1' === component.slug && <_ChatAddMember1 component={component} /> }
                { 'chat' === component.slug && <_ChatList1 component={component} /> }
                { 'leaderboard-level-1' === component.slug && <_LeaderboardLevel1 component={component} /> }
                { 'leaderboard-profile-1' === component.slug && <_LeaderBoardProfile1 component={component} /> }
                { 'leaderboard-members-1' === component.slug && <_LeaderboardMembers1 component={component} /> }
                { 'course-1' === component.slug && <_FCCourseList1 component={component} /> }
                { 'course-information-1' === component.slug && <_CourseInformation1 component={component} /> }
                { 'course-content-1' === component.slug && <_CourseContent1 component={component} /> }
                { 'course-instructor-1' === component.slug && <_CourseInstructor1 component={component} /> }
                { 'enroll-button-1' === component.slug && <_EnrollButton1 component={component} /> }
                { 'lesson-information-1' === component.slug && <_LessonInformation1 component={component} /> }
                { 'lesson-video-1' === component.slug && <_LessonVideo1 component={component} /> }
                { 'lesson-details-1-2' === component.slug && <_LessonDetails1 component={component} /> }
                { 'lesson-quiz-1' === component.slug && <_LessonQuiz1 component={component} /> }
                { 'lesson-documents-1' === component.slug && <_LessonDocuments1 component={component} /> }
                { 'lesson-discussion-1' === component.slug && <_LessonDiscussion1 component={component} /> }


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

                {
                    hovered && (
                        <Overlay
                            // display={copySelectedComponent?.id === component.id ? 'none' : 'block'}
                            color="#FFE8CC"
                            backgroundOpacity={0.35}
                            blur={0}
                            // onClick={handleSelectComponent}
                            zIndex={1}
                        >
                            {
                                copySelectedComponent?.id !== component.id && (
                                    <Flex justify="space-between" align="flex-start" gap={0}>
                                        <ActionIcon
                                            variant="filled"
                                            disabled={RESTRICTED_PAGES.includes(activeScreen)}
                                        >
                                            <Box {...provided.dragHandleProps} >
                                                <IconHandStop color="var(--mantine-color-white)" cursor={RESTRICTED_PAGES.includes(activeScreen) ? 'not-allowed' : 'grab'} />
                                            </Box>
                                        </ActionIcon>
                                        <Paper bg="#ffffff" shadow="md" p={5} mx={2}>
                                            <Text size="xs" ta="center" lineClamp={1}>{component?.name}</Text>
                                        </Paper>
                                        <Flex wrap="nowrap" justify="flex-end" gap={2}>
                                            <ActionIcon
                                                disabled={RESTRICTED_PAGES.includes(activeScreen)}
                                                variant="filled"
                                                onClick={handleSelectComponent}
                                            >
                                                <IconEdit color="var(--mantine-color-white)" cursor={RESTRICTED_PAGES.includes(activeScreen) ? 'not-allowed' : 'pointer'} />
                                            </ActionIcon>

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


                            {
                                copySelectedComponent?.id === component.id && (
                                    <Center>
                                        <Paper
                                            bg={theme.primaryColor}
                                            withBorder
                                            shadow="md"
                                            p="xs"
                                        >
                                            <Text size="xs" ta="center">Clicking is disabled while you're editing components</Text>
                                            <Text size="xs" ta="center">To exit edit mode, close the component edit panel on your right</Text>
                                        </Paper>

                                    </Center>
                                )
                            }

                        </Overlay>
                    )
                }
            </Box>

        </>

    )
}

export default _Component;