import React, {useState} from "react";
import {
    Divider,
    Flex,
    HStack,
    Image,
    Input,
    InputGroup,
    InputLeftElement,
    InputRightElement,
    Stack,
    Text
} from "@chakra-ui/react";
import {useNavigate} from "react-router-dom";
import {Search2Icon} from "@chakra-ui/icons";
import {snakeCase} from "change-case";

interface SidebarMenuItem {
    label: string,
    icon?: string,
    path: string,
}

interface SidebarMenuSection {
    label?: string,
    menuItems: SidebarMenuItem[]
}

interface SidebarProps {
    componentName?: string,
    menuItemSections: SidebarMenuSection[],
    dividerStyles?: {
        color?: string,
        thickness?: string
    },
    logoIcon?: string,
    primaryColor?: string,
    secondaryColor?: string,
    activeItemBG?: string,
    activeItemColor?: string,
    showLogoBG?: boolean,
    logoBgColor?: string,
    navItemFontSize?: string,
    logoSize?: number,
    sideBarPaddingX?: string,
    sideBarPaddingY?: string,
    menuItemsPaddingX?: string,
    menuItemsPaddingY?: string,
    menuItemsCornerRadius?: string,
    //search input props
    isSearchInput?: boolean,
    searchInputBg?: string,
    searchIconColor?: string,
    searchIconPosition?: string,
}

function Sidebar(props: SidebarProps) {
    const {
        menuItemSections,
        dividerStyles = {color: "#ffffff", thickness: "2px"},
        logoIcon = "https://socialimpact.com/wp-content/uploads/2021/03/logo-placeholder.jpg",
        primaryColor = "#051E61",
        secondaryColor = "#ffffff",
        activeItemBG = "white",
        activeItemColor = "black",
        showLogoBG = false,
        logoBgColor = primaryColor,
        navItemFontSize = "18px",
        logoSize = 80,
        menuItemsPaddingX = "32px",
        menuItemsCornerRadius = "8px",
        menuItemsPaddingY = "15px",
        sideBarPaddingX = "8px",
        sideBarPaddingY = "8px",
        searchInputBg = "rgba(0, 0, 0, 0.03)",
        searchIconColor = "rgba(0, 0, 0, 0.3)",
        searchIconPosition = "left",
        isSearchInput = false
    } = props;
    const isActive = (path: string) => {
        return (window.location.pathname.substring(1) || "/") === snakeCase(path);
    };
    let navigate = useNavigate();
    const [filterText, setFilterText] = useState('');


    const onClick = (path: string) => {
        navigate(`/${snakeCase(path)}`);
    }
    let searchItem: any;
    if (isSearchInput) {
        searchItem = (
            <Stack
                w="100%"
                px={sideBarPaddingX}
                gap="2">
                <InputGroup
                    w='100%'
                    bg={searchInputBg}
                >
                    <Input
                        border='0.75px solid #9A9A9A'
                        outline='none'
                        value={filterText}
                        onChange={(e) => setFilterText(e.target.value)}
                        placeholder='Search'
                        px={menuItemsPaddingX}
                        py={menuItemsPaddingY}
                        borderRadius={menuItemsCornerRadius}
                    />
                    <InputRightElement
                        hidden={searchIconPosition === "left"}
                        children={<Search2Icon color={searchIconColor}/>}/>
                    <InputLeftElement
                        hidden={searchIconPosition === "right"}
                        children={<Search2Icon color={searchIconColor}/>}/>
                </InputGroup>
            </Stack>
        )
    }

    return (
        <Stack
            bg={primaryColor}
            w="100%"
            spacing={"16px"}
            minH="100vh">
            <Flex
                alignItems={"center"}
                justifyContent="center"
                bg={showLogoBG ? logoBgColor : "transparent"}
                pt={"12px"}
                h="100px">
                <Image h={`${logoSize}%`} src={logoIcon}/>
            </Flex>
            {searchItem}
            <Stack
                px={sideBarPaddingX}
                py={sideBarPaddingY}>
                {menuItemSections?.map((section: any, sectionIndex: number) => (
                    <Stack>
                        {section?.menuItems?.map((item: any, index: number) => (
                            <SidebarItem
                                id={index}
                                title={item.label}
                                icon={item.icon}
                                onClick={() => onClick(item.path)}
                                isActive={isActive(item.path)}
                                secondaryColor={secondaryColor}
                                primaryColor={primaryColor}
                                navItemFontSize={navItemFontSize}
                                menuItemsPaddingX={menuItemsPaddingX}
                                menuItemsPaddingY={menuItemsPaddingY}
                                menuItemsCornerRadius={menuItemsCornerRadius}
                                activeItemBG={activeItemBG}
                                activeItemColor={activeItemColor}
                            />
                        ))
                        }
                        <Divider
                            hidden={sectionIndex === menuItemSections?.length - 1}
                            orientation='horizontal'
                            borderColor={dividerStyles.color}
                            borderBottomWidth={dividerStyles.thickness}/>

                    </Stack>
                ))}
            </Stack>
        </Stack>
    );

}

function SidebarItem(props: any) {
    const {
        title, icon, onClick, menuItemsCornerRadius,
        isActive, secondaryColor, menuItemsPaddingY, navItemFontSize,
        primaryColor, menuItemsPaddingX, activeItemBG, activeItemColor
    } = props;

    let iconEl: any;
    if (icon) {
        iconEl = <i className={icon}></i>
    }
    return (
        <HStack
            borderLeft={isActive && `3px solid ${primaryColor}`}
            width={"100%"}
            px={menuItemsPaddingX}
            py={menuItemsPaddingY}
            borderRadius={menuItemsCornerRadius}
            _hover={{
                bg: secondaryColor,
                borderLeft: `3px solid ${secondaryColor}`,
                color: primaryColor
            }}
            bg={isActive ? activeItemBG : primaryColor}
            color={isActive ? activeItemColor : secondaryColor}
            onClick={onClick}
            cursor={"pointer"}
        >

            {iconEl}
            <Text
                fontFamily="Inter"
                fontSize={navItemFontSize}
                fontWeight={isActive ? "600" : "400"}
                textAlign="left"
                pl="14px"
                textTransform={"capitalize"}>
                {title}
            </Text>
        </HStack>
    );
}

export default Sidebar;