import {ActionIcon, Box, Divider, Flex, Group, Image, 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 {fetchActiveAppbar} from "../../../features/globalComponents/globalComponentsThunks";
import {modals} from "@mantine/modals";

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

    const dispatch = useDispatch();

    const {activeAppbar, loading} = useSelector((state => state.activeAppbar));
    const {selectedComponent, copySelectedComponent} = useSelector((state => state.selectedComponent));
    const {activeTheme} = useSelector((state => state.activeTheme));
    const {activeSupportPlugin} = useSelector((state => state.config));


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

                }

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




    }

    useEffect(() => {
        dispatch(fetchActiveAppbar());
    }, [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={activeAppbar?.customize_styles?.general_properties?.background_color}
                px={activeAppbar?.customize_styles?.general_properties?.padding_x}
                py={activeAppbar?.customize_styles?.general_properties?.padding_y}
                style={{
                    boxShadow: `gray 0px ${activeAppbar?.customize_styles?.general_properties?.shadow}px ${activeAppbar?.customize_styles?.general_properties?.shadow}px`,
                    borderRadius: `${activeAppbar?.customize_styles?.general_properties?.shape_radius}px`,
                    zIndex: 2,
                    overflow: 'visible',
                    border: `${activeAppbar?.customize_styles?.general_properties?.border_width}px solid ${activeAppbar?.customize_styles?.general_properties?.border_color}`


                }}
                pos={activeAppbar?.customize_styles?.general_properties?.float ? 'absolute' : ''}
                top={activeAppbar?.customize_styles?.general_properties?.float ? `${activeAppbar?.customize_styles?.general_properties?.margin_y}px` : 0}
                w={activeAppbar?.customize_styles?.general_properties?.float ? `${100 - activeAppbar?.customize_styles?.general_properties?.margin_x}%` : '100%'}
                left={activeAppbar?.customize_styles?.general_properties?.float ? `${activeAppbar?.customize_styles?.general_properties?.margin_x / 2}%` : 0}
            >
                <Flex gap="lg" justify="space-between" align="center">
                    <Flex gap="xs" justify="flex-start" align="center">
                        {activeAppbar?.components?.map(component => {
                            if (component.component_position === 'leading_area') {
                                if ('ProfileImage' === component.customize_properties?.layout_type) {

                                    return <Image fit="cover" w={activeAppbar?.customize_styles?.image_properties?.width} radius={activeAppbar?.customize_styles?.image_properties?.shape_radius} h={activeAppbar?.customize_styles?.image_properties?.height} src={component?.image_url} />

                                }else if ('Image' === component.customize_properties?.layout_type) {

                                    return <Image fit="contain" radius={activeAppbar?.customize_styles?.image_properties?.shape_radius} w={activeAppbar?.customize_styles?.image_properties?.size} h={activeAppbar?.customize_styles?.image_properties?.size} src={component?.image_url}/>

                                }else if ('IconButton' === component.customize_properties?.layout_type) {

                                    const ICON = TablerIcons[component.customize_properties?.icon_code] === undefined ? TablerIcons['IconDots'] : TablerIcons[component.customize_properties?.icon_code]

                                    return (
                                        <Box
                                            style={{
                                                backgroundColor: activeAppbar?.customize_styles?.icon_properties?.is_transparent_background ? 'transparent' : activeAppbar?.customize_styles?.icon_properties?.background_color,
                                                borderRadius: `${activeAppbar?.customize_styles?.icon_properties?.shape_radius}%`,
                                                paddingTop: `${activeAppbar?.customize_styles?.icon_properties?.padding_y}px`,
                                                paddingBottom: `${activeAppbar?.customize_styles?.icon_properties?.padding_y}px`,
                                                paddingLeft: `${activeAppbar?.customize_styles?.icon_properties?.padding_x}px`,
                                                paddingRight: `${activeAppbar?.customize_styles?.icon_properties?.padding_x}px`,
                                                display: 'flex',
                                                justifyContent: 'center',
                                                alignItems: 'center',
                                            }}
                                        >
                                            <ICON
                                                size={activeAppbar?.customize_styles?.icon_properties?.size}
                                                color={activeAppbar?.customize_styles?.icon_properties?.color}
                                                stroke={activeAppbar?.customize_styles?.icon_properties?.weight}
                                            />
                                        </Box>
                                    );
                                }else if ('Text' === component.customize_properties?.layout_type) {
                                    return <Text fw={activeAppbar?.customize_styles?.text_properties?.font_weight} c={activeAppbar?.customize_styles?.text_properties?.color}>{component?.customize_properties?.label}</Text>

                                }
                            }
                        })}
                    </Flex>
                    <Flex gap="xs" justify="center" align="center">
                        {activeAppbar?.components?.map(component => {
                            if (component.component_position === 'title_area') {
                                if ('ProfileImage' === component.customize_properties?.layout_type) {

                                    return <Image fit="cover" w={activeAppbar?.customize_styles?.image_properties?.width} radius={activeAppbar?.customize_styles?.image_properties?.shape_radius} h={activeAppbar?.customize_styles?.image_properties?.height} src={component?.image_url} />

                                }else if ('Image' === component.customize_properties?.layout_type) {

                                    return <Image fit="cover" w={`100%`} radius={activeAppbar?.customize_styles?.image_properties?.shape_radius} h={activeAppbar?.customize_styles?.image_properties?.size} src={component?.image_url} />

                                }else if ('IconButton' === component.customize_properties?.layout_type) {
                                    const ICON = TablerIcons[component.customize_properties?.icon_code] === undefined ? TablerIcons['IconDots'] : TablerIcons[component.customize_properties?.icon_code]

                                    return (
                                        <Box
                                            style={{
                                                backgroundColor: activeAppbar?.customize_styles?.icon_properties?.is_transparent_background ? 'transparent' : activeAppbar?.customize_styles?.icon_properties?.background_color,
                                                borderRadius: `${activeAppbar?.customize_styles?.icon_properties?.shape_radius}%`,
                                                paddingTop: `${activeAppbar?.customize_styles?.icon_properties?.padding_y}px`,
                                                paddingBottom: `${activeAppbar?.customize_styles?.icon_properties?.padding_y}px`,
                                                paddingLeft: `${activeAppbar?.customize_styles?.icon_properties?.padding_x}px`,
                                                paddingRight: `${activeAppbar?.customize_styles?.icon_properties?.padding_x}px`,
                                                display: 'flex',
                                                justifyContent: 'center',
                                                alignItems: 'center',
                                            }}
                                        >
                                            <ICON
                                                size={activeAppbar?.customize_styles?.icon_properties?.size}
                                                color={activeAppbar?.customize_styles?.icon_properties?.color}
                                                stroke={activeAppbar?.customize_styles?.icon_properties?.weight}
                                            />
                                        </Box>
                                    );
                                }else if ('Text' === component.customize_properties?.layout_type) {
                                    return <Text fw={activeAppbar?.customize_styles?.text_properties?.font_weight} c={activeAppbar?.customize_styles?.text_properties?.color}>{component?.customize_properties?.label}</Text>

                                }
                            }
                        })}
                    </Flex>
                    <Flex gap="xs" justify="flex-end" align="center">
                        {activeAppbar?.components?.map(component => {
                            if (component.component_position === 'action_area') {
                                if ('ProfileImage' === component.customize_properties?.layout_type) {

                                    return <Image fit="cover" w={activeAppbar?.customize_styles?.image_properties?.width} radius={activeAppbar?.customize_styles?.image_properties?.shape_radius} h={activeAppbar?.customize_styles?.image_properties?.height} src={component?.image_url} />

                                }else if ('Image' === component.customize_properties?.layout_type) {
                                    return <Image fit="contain" radius={activeAppbar?.customize_styles?.image_properties?.shape_radius} w={activeAppbar?.customize_styles?.image_properties?.width} h={activeAppbar?.customize_styles?.image_properties?.height} src={component?.image_url} />
                                }else if ('IconButton' === component.customize_properties?.layout_type) {
                                    const ICON = TablerIcons[component.customize_properties?.icon_code] === undefined ? TablerIcons['IconDots'] : TablerIcons[component.customize_properties?.icon_code]

                                    return (
                                        <Box
                                            style={{
                                                backgroundColor: activeAppbar?.customize_styles?.icon_properties?.is_transparent_background ? 'transparent' : activeAppbar?.customize_styles?.icon_properties?.background_color,
                                                borderRadius: `${activeAppbar?.customize_styles?.icon_properties?.shape_radius}%`,
                                                paddingTop: `${activeAppbar?.customize_styles?.icon_properties?.padding_y}px`,
                                                paddingBottom: `${activeAppbar?.customize_styles?.icon_properties?.padding_y}px`,
                                                paddingLeft: `${activeAppbar?.customize_styles?.icon_properties?.padding_x}px`,
                                                paddingRight: `${activeAppbar?.customize_styles?.icon_properties?.padding_x}px`,
                                                display: 'flex',
                                                justifyContent: 'center',
                                                alignItems: 'center',
                                            }}
                                        >
                                            <ICON
                                                size={activeAppbar?.customize_styles?.icon_properties?.size}
                                                color={activeAppbar?.customize_styles?.icon_properties?.color}
                                                stroke={activeAppbar?.customize_styles?.icon_properties?.weight}
                                            />
                                        </Box>
                                    );
                                }else if ('Text' === component.customize_properties?.layout_type) {
                                    return <Text fw={activeAppbar?.customize_styles?.text_properties?.font_weight} c={activeAppbar?.customize_styles?.text_properties?.color}>{component?.customize_properties?.label}</Text>

                                }
                            }
                        })}
                    </Flex>
                </Flex>
                {
                    hovered && 'edit' === viewMode && (
                        <Overlay
                            display={copySelectedComponent?.id === activeAppbar.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 Appbar;