import {ActionIcon, Box, Center, Flex, LoadingOverlay, Overlay} from "@mantine/core";
import * as TablerIcons from "@tabler/icons-react";
import axios from "axios";
import {useEffect, useState} from "@wordpress/element";
import {IconEdit} from "@tabler/icons-react";
import {useHover} from "@mantine/hooks";


const Navbar = ({recallNavbar, setSelectedLayout, reloadScreen, isThemeChange, isSupportPluginChange}) => {
    const [navbar, setNavbar] = useState(null);
    const [isLoading, setLoading] = useState(false);
    const { hovered, ref} = useHover();
    const getNavbar = () => {
        setLoading(true)
        axios({
            method: 'get',
            url: `${appLocalizer.apiUrl}/appza/web/api/v1/global-layout`,
            headers: {
                "Accept": `application/json`,
                "Content-Type": `application/json`,
                "Access-Control-Allow-Origin": '*',
            },
            params: {mode: 'navbar'}
        })
            .then(res => {
                setNavbar(res.data)
                setLoading(false)

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

    }

    useEffect(() => {
        getNavbar();
    }, [recallNavbar, reloadScreen, isThemeChange, isSupportPluginChange])

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

            >
                <Flex gap="md" justify="space-evenly" align="center">
                    {navbar?.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: navbar?.customize_styles?.icon_properties?.is_transparent_background ? 'transparent' : navbar?.customize_styles?.icon_properties?.background_color,
                                    borderRadius: `${navbar?.customize_styles?.icon_properties?.shape_radius}%`,
                                    paddingTop: `${navbar?.customize_styles?.icon_properties?.padding_y}px`,
                                    paddingBottom: `${navbar?.customize_styles?.icon_properties?.padding_y}px`,
                                    paddingLeft: `${navbar?.customize_styles?.icon_properties?.padding_x}px`,
                                    paddingRight: `${navbar?.customize_styles?.icon_properties?.padding_x}px`,
                                    display: 'flex',
                                    justifyContent: 'center',
                                    alignItems: 'center',
                                }}
                            >
                                <ICON
                                    size={navbar?.customize_styles?.icon_properties?.size}
                                    color={0 === index ? navbar?.customize_styles?.icon_properties?.selected_color : navbar?.customize_styles?.icon_properties?.unselected_color}
                                    stroke={navbar?.customize_styles?.icon_properties?.weight}
                                />
                            </Box>
                        );
                    })}
                </Flex>

                {
                    hovered && (
                        <Overlay
                            color="#FFE8CC"
                            backgroundOpacity={0.35}
                            blur={0}
                            onClick={() => {
                                // setActive(layout.id)
                                setSelectedLayout(null);
                                setSelectedLayout(navbar);
                            }}
                            style={{cursor: 'pointer'}}
                        >
                            <ActionIcon
                                variant="filled"
                                pos="absolute"
                                top={0}
                                right={0}
                                onClick={() => {
                                    // setActive(layout.id)
                                    setSelectedLayout(null);
                                    setSelectedLayout(navbar);
                                }}
                            >
                                <IconEdit color="var(--mantine-color-white)" cursor="pointer" />
                            </ActionIcon>
                        </Overlay>
                    )
                }
            </Box>
        </Box>

    )
}

export default Navbar;