import {ActionIcon, Box, Divider, Flex, Group, LoadingOverlay, Overlay, Text} from "@mantine/core";
import * as TablerIcons from "@tabler/icons-react";
import {IconAlertTriangle, IconEdit} from "@tabler/icons-react";
import {useHover} from "@mantine/hooks";
import {useDispatch, useSelector} from "react-redux";
import {setSelectedComponent} from "../../../features/selectedComponent/selectedComponentSlice";
import {useEffect} from "@wordpress/element";
import {fetchActiveNavbar} from "../../../features/globalComponents/globalComponentsThunks";
import {modals} from "@mantine/modals";


const Navbar = () => {
    const { hovered, ref} = useHover();

    const dispatch = useDispatch();

    const {activeNavbar, loading} = useSelector((state => state.activeNavbar));
    const {activeSupportPlugin} = useSelector((state => state.config));

    const {activeTheme} = useSelector((state => state.activeTheme));
    const {selectedComponent, copySelectedComponent} = useSelector((state => state.selectedComponent));
    const {viewMode} = useSelector(state => state.viewMode)

    const handleSelectLayout = () => {


        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(activeNavbar));

                }

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

    useEffect(() => {
        dispatch(fetchActiveNavbar());
    }, [dispatch, activeTheme, activeSupportPlugin]);


    return(
        <Box pos="relative" mih={25}>
            <LoadingOverlay
                visible={loading}
                zIndex={10}
                overlayProps={{ radius: "sm", blur: 5 }}
                loaderProps={{size: 'xs' }}
            />
            <Box
                ref={ref}
                bg={activeNavbar?.customize_styles?.general_properties?.background_color}
                px={activeNavbar?.customize_styles?.general_properties?.padding_x}
                py={activeNavbar?.customize_styles?.general_properties?.padding_y}
                style={{
                    boxShadow: `#83aad11f 0px -${activeNavbar?.customize_styles?.general_properties?.shadow}px ${activeNavbar?.customize_styles?.general_properties?.shadow}px`,
                    borderRadius: `${activeNavbar?.customize_styles?.general_properties?.shape_radius}px`,
                    border: `${activeNavbar?.customize_styles?.general_properties?.border_width}px solid ${activeNavbar?.customize_styles?.general_properties?.border_color}`,
                    zIndex: 2,
                    overflow: 'visible',
                }}
                pos={activeNavbar?.customize_styles?.general_properties?.float ? 'absolute' : ''}
                // pos="absolute"
                bottom={activeNavbar?.customize_styles?.general_properties?.float ? `${activeNavbar?.customize_styles?.general_properties?.margin_y}px` : 0}
                w={activeNavbar?.customize_styles?.general_properties?.float ? `${100 - activeNavbar?.customize_styles?.general_properties?.margin_x}%` : '100%'}
                left={activeNavbar?.customize_styles?.general_properties?.float ? `${activeNavbar?.customize_styles?.general_properties?.margin_x / 2}%` : 0}

            >
                <Flex gap="md" justify="space-evenly" align="center">
                    {activeNavbar?.components?.map((component, index) => {
                        const ICON = TablerIcons[component.customize_properties?.icon_code] === undefined ? TablerIcons['IconDots'] : TablerIcons[component.customize_properties?.icon_code]

                        return (
                            <Box
                                style={{
                                    backgroundColor: activeNavbar?.customize_styles?.icon_properties?.is_transparent_background ? 'transparent' : activeNavbar?.customize_styles?.icon_properties?.background_color,
                                    borderRadius: `${activeNavbar?.customize_styles?.icon_properties?.shape_radius}%`,
                                    paddingTop: `${activeNavbar?.customize_styles?.icon_properties?.padding_y}px`,
                                    paddingBottom: `${activeNavbar?.customize_styles?.icon_properties?.padding_y}px`,
                                    paddingLeft: `${activeNavbar?.customize_styles?.icon_properties?.padding_x}px`,
                                    paddingRight: `${activeNavbar?.customize_styles?.icon_properties?.padding_x}px`,
                                    display: 'flex',
                                    justifyContent: 'center',
                                    alignItems: 'center',
                                }}
                            >
                                <ICON
                                    size={activeNavbar?.customize_styles?.icon_properties?.size}
                                    color={0 === index ? activeNavbar?.customize_styles?.icon_properties?.selected_color : activeNavbar?.customize_styles?.icon_properties?.unselected_color}
                                    stroke={activeNavbar?.customize_styles?.icon_properties?.weight}
                                />
                            </Box>
                        );
                    })}
                </Flex>

                {
                    hovered && 'edit' === viewMode && (
                        <Overlay
                            display={copySelectedComponent?.id === activeNavbar.id ? 'none' : 'block'}
                            color="#FFE8CC"
                            backgroundOpacity={0.35}
                            blur={0}
                            onClick={handleSelectLayout}
                            style={{cursor: 'pointer'}}
                        >
                            <ActionIcon
                                variant="filled"
                                pos="absolute"
                                top={0}
                                right={0}
                                onClick={handleSelectLayout}
                            >
                                <IconEdit color="var(--mantine-color-white)" cursor="pointer" />
                            </ActionIcon>
                        </Overlay>
                    )
                }
            </Box>
        </Box>

    )
}

export default Navbar;