import {ActionIcon, Box, Center, Flex, Image, LoadingOverlay, Overlay, Text} from "@mantine/core";

import * as TablerIcons from "@tabler/icons-react";
import {IconEdit} from "@tabler/icons-react";
import axios from "axios";
import {useEffect, useState} from "@wordpress/element";
import {useHover} from "@mantine/hooks";

const Appbar = ({recallAppbar, setSelectedLayout, reloadScreen, isThemeChange, isSupportPluginChange}) => {
    const [appbar, setAppbar] = useState(null);
    const [isLoading, setLoading] = useState(false);
    const { hovered, ref} = useHover();


    const getAppbar = () => {
        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: 'appbar'}
        })
            .then(res => {
                setAppbar(res.data)
                setLoading(false)


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

            });

    }

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


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

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

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

                                    return <Image fit="contain" radius={appbar?.customize_styles?.image_properties?.shape_radius} w={appbar?.customize_styles?.image_properties?.size} h={appbar?.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: appbar?.customize_styles?.icon_properties?.is_transparent_background ? 'transparent' : appbar?.customize_styles?.icon_properties?.background_color,
                                                borderRadius: `${appbar?.customize_styles?.icon_properties?.shape_radius}%`,
                                                paddingTop: `${appbar?.customize_styles?.icon_properties?.padding_y}px`,
                                                paddingBottom: `${appbar?.customize_styles?.icon_properties?.padding_y}px`,
                                                paddingLeft: `${appbar?.customize_styles?.icon_properties?.padding_x}px`,
                                                paddingRight: `${appbar?.customize_styles?.icon_properties?.padding_x}px`,
                                                display: 'flex',
                                                justifyContent: 'center',
                                                alignItems: 'center',
                                            }}
                                        >
                                            <ICON
                                                size={appbar?.customize_styles?.icon_properties?.size}
                                                color={appbar?.customize_styles?.icon_properties?.color}
                                                stroke={appbar?.customize_styles?.icon_properties?.weight}
                                            />
                                        </Box>
                                    );
                                }else if ('Text' === component.customize_properties?.layout_type) {
                                    return <Text fw={appbar?.customize_styles?.text_properties?.font_weight} c={appbar?.customize_styles?.text_properties?.color}>{component?.customize_properties?.label}</Text>

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

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

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

                                    return <Image fit="cover" w={`100%`} radius={appbar?.customize_styles?.image_properties?.shape_radius} h={appbar?.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: appbar?.customize_styles?.icon_properties?.is_transparent_background ? 'transparent' : appbar?.customize_styles?.icon_properties?.background_color,
                                                borderRadius: `${appbar?.customize_styles?.icon_properties?.shape_radius}%`,
                                                paddingTop: `${appbar?.customize_styles?.icon_properties?.padding_y}px`,
                                                paddingBottom: `${appbar?.customize_styles?.icon_properties?.padding_y}px`,
                                                paddingLeft: `${appbar?.customize_styles?.icon_properties?.padding_x}px`,
                                                paddingRight: `${appbar?.customize_styles?.icon_properties?.padding_x}px`,
                                                display: 'flex',
                                                justifyContent: 'center',
                                                alignItems: 'center',
                                            }}
                                        >
                                            <ICON
                                                size={appbar?.customize_styles?.icon_properties?.size}
                                                color={appbar?.customize_styles?.icon_properties?.color}
                                                stroke={appbar?.customize_styles?.icon_properties?.weight}
                                            />
                                        </Box>
                                    );
                                }else if ('Text' === component.customize_properties?.layout_type) {
                                    return <Text fw={appbar?.customize_styles?.text_properties?.font_weight} c={appbar?.customize_styles?.text_properties?.color}>{component?.customize_properties?.label}</Text>

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

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

                                }else if ('Image' === component.customize_properties?.layout_type) {
                                    return <Image fit="contain" radius={appbar?.customize_styles?.image_properties?.shape_radius} w={appbar?.customize_styles?.image_properties?.width} h={appbar?.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: appbar?.customize_styles?.icon_properties?.is_transparent_background ? 'transparent' : appbar?.customize_styles?.icon_properties?.background_color,
                                                borderRadius: `${appbar?.customize_styles?.icon_properties?.shape_radius}%`,
                                                paddingTop: `${appbar?.customize_styles?.icon_properties?.padding_y}px`,
                                                paddingBottom: `${appbar?.customize_styles?.icon_properties?.padding_y}px`,
                                                paddingLeft: `${appbar?.customize_styles?.icon_properties?.padding_x}px`,
                                                paddingRight: `${appbar?.customize_styles?.icon_properties?.padding_x}px`,
                                                display: 'flex',
                                                justifyContent: 'center',
                                                alignItems: 'center',
                                            }}
                                        >
                                            <ICON
                                                size={appbar?.customize_styles?.icon_properties?.size}
                                                color={appbar?.customize_styles?.icon_properties?.color}
                                                stroke={appbar?.customize_styles?.icon_properties?.weight}
                                            />
                                        </Box>
                                    );
                                }else if ('Text' === component.customize_properties?.layout_type) {
                                    return <Text fw={appbar?.customize_styles?.text_properties?.font_weight} c={appbar?.customize_styles?.text_properties?.color}>{component?.customize_properties?.label}</Text>

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

            </Box>
        </Box>
    )
}

export default Appbar;