import {Circle, Flex, HStack, Image, Menu, MenuButton, MenuItem, MenuList, Stack, Text} from "@chakra-ui/react";
import React from "react";
import {useNavigate} from "react-router-dom";
import {chevronRight, messagesIcon, userIcon} from "../../images/index";
import {snakeCase} from 'change-case';

interface DelightHeaderProps {
    navItems?: any[],
    logo?: string,
    title?: string,
    messagesEnabled?: boolean,
    userAvatarEnabled?: boolean,
    primaryColor?: string,
    secondaryColor?: string,
    breadCrumb?: string,
    userMenuItems?: any[],
    actionsVariant?: number,
}

const controlHover: any = {
    cursor: 'pointer',
}

enum ActionVariant {
    VARIANT_TYPE_1 = 1,
    VARIANT_TYPE_2 = 2
}

const DelightHeader = (props: DelightHeaderProps) => {
    const {
        logo = "",
        title = "Header",
        messagesEnabled = true,
        userAvatarEnabled = true,
        secondaryColor = "#000000",
        primaryColor = "#ffffff",
        navItems = [],
        breadCrumb = "",
        userMenuItems = [],
        actionsVariant = 1,
    } = props;

    const actionIcons: string[] = ["bell", "comment-alt"]

    const isActive = (path: string) => {
        return window.location.pathname === path;
    };

    let navigate = useNavigate();


    const handleClick = (path: string) => {
        navigate(`/${snakeCase(path)}`);
    }

    return (
        <>
            <Flex
                borderBottom="1px solid #DFE0EB"
                bg={primaryColor}
                h="100px"
                px="28px"
                minW="100%"
                alignItems="center"
                justifyContent="space-between">

                {/* Left section */}
                <HStack alignItems={"center"}>
                    {logo &&
                        <Stack>
                            <Image src={logo} w="179px" h="35px" />
                        </Stack>
                    }

                    {title &&
                        <HStack spacing={2} justifyContent={"center"} alignContent="center" alignItems={"center"}>
                            <Text fontSize="30px" fontWeight="700" color={secondaryColor}>{title}</Text>

                            {breadCrumb && <>
                                <Image src={chevronRight} />
                                <Text fontSize="20px" color={secondaryColor}>{breadCrumb}</Text>
                            </>
                            }

                        </HStack>
                    }
                </HStack>

                {/* Center section */}
                {navItems &&
                    <HStack justifyContent="space-between">
                        {navItems.map((item: any, index: number) => (
                            <>
                                <Menu>
                                    <MenuButton
                                        fontSize="24px"
                                        p={2}
                                        bg={isActive(item.path) ? secondaryColor : primaryColor}
                                        color={isActive(item.path) ? primaryColor : secondaryColor}
                                        onClick={!item.hasSubMenu ? () => handleClick(item.path) : undefined}
                                        _hover={{ bg: secondaryColor, color: primaryColor, cursor: 'pointer' }}>
                                        {item.label}
                                        {/* <ChevronDownIcon/> */}
                                    </MenuButton>
                                    {item.hasSubMenu &&
                                        <MenuList>
                                            {item.subMenu.map((subItem: any) => (
                                                <MenuItem onClick={() => handleClick(subItem.path)}>
                                                    {subItem.label}
                                                </MenuItem>
                                            ))}
                                        </MenuList>
                                    }
                                </Menu>
                            </>
                        ))}
                    </HStack>
                }

                {/* Right section */}
                {actionsVariant === ActionVariant.VARIANT_TYPE_1 ?

                    <HStack spacing={"28px"}>
                        {messagesEnabled &&
                            <Stack _hover={controlHover}>
                                <Image src={messagesIcon} w="40px" h="40px" />
                            </Stack>
                        }

                        {userAvatarEnabled &&
                            <Menu>
                                <MenuButton
                                    fontSize="24px"
                                    p={2}>
                                    <Stack >
                                        <Image _hover={controlHover} src={userIcon} w="70px" h="70px" />
                                    </Stack>
                                </MenuButton>

                                {/* Commenting this for now. May use it later */}
                                {/* {userMenuItems &&
                                <MenuList>
                                {userMenuItems.map((subItem: any) => (
                                    <MenuItem onClick={() => handleClick(subItem.path)}>
                                    {subItem.label}
                                    </MenuItem>
                                    ))}
                                    </MenuList>
                                } */}

                            </Menu>
                        }

                    </HStack>

                    :

                    actionIcons.length > 0 &&

                    <HStack spacing={4}>
                        {actionIcons.map((icon: string, index: number) => (
                            <Circle _hover={controlHover} size="36px" color={secondaryColor} bg={`${secondaryColor}33`}>
                                <i key={index} className={`fas fa-${icon}`}></i>
                            </Circle>
                        ))}
                    </HStack>

                }
            </Flex>
        </>
    );
};

export default DelightHeader;