import Button from "@components/Button/Button";
import {
    KeyboardArrowDown
} from "@mui/icons-material";
import {
    MenuProps as FilterMenuProps,
    Menu,
    MenuItem
} from "@mui/material";
import React, { useEffect } from "react";
import './search-menu.scss';

export interface Options {
    label: string;
    value: string;
    description?: string;
}

export interface MenuProps extends FilterMenuProps {
    label?: string;
    options?: Options[];
    onChangeEvent?: (filterData: any) => void;

}

const data: Options[] = [
    { label: 'All', value: 'all' },
    { label: 'Ticket', value: 'ticket', description: 'External Id, ID, Title' },
    { label: 'Assignee', value: 'assignee', description: 'Email, Name' },
    { label: 'Configuration Item', value: 'configuration_item', description: 'name' },
    { label: 'Major Incidents', value: 'major_incidents', description: 'ID, Title' },
]

const SearchMenu = ({ options, label, ...rest }: MenuProps) => {
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const open = Boolean(anchorEl);

    const [items, setItems] = React.useState<Options[]>(data)

    const [selectedLabel, setSelectedLabel] = React.useState<string>('All');
    const [selectedValue, setSelectedValue] = React.useState<string>('');

    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };

    const getLabelFromValue = (value: string) => {
        const label = items.find(item => item.value === value);
        return label ? label.label : '';
    };

    const handleOnChange = (selected: string) => {
        setSelectedLabel(getLabelFromValue(selected));
        setSelectedValue(selected);
        handleClose();
    }

    const handleCriteria = () => {
        const newFilterData: any = {
            field: selectedValue,
            operand: selectedValue,
            operator: '='
        };
    }

    useEffect(() => {
        handleCriteria();
    }, [selectedValue]);

    return (
        <div className="search-menu-container">
            <Button
                id="basic-button"
                aria-controls={open ? "basic-menu" : undefined}
                aria-haspopup="true"
                aria-expanded={open ? "true" : undefined}
                onClick={handleClick}
                endIcon={<KeyboardArrowDown />}
                label={selectedLabel}
            ></Button>
            <Menu
                className="search-menu-wrapper"
                {...rest}
                id="basic-menu"
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                MenuListProps={{
                    "aria-labelledby": "basic-button",
                }}
            >
                {items?.map((item) => (
                    <MenuItem key={item.value} value={item.value}
                        selected={item.value === selectedValue}
                        onClick={() => handleOnChange(item.value)}>
                        <div className="search-menu-items">
                            <div className="label">{item?.label}</div>
                            <div className="description">{item.description}</div>
                        </div>
                    </MenuItem>
                ))}

            </Menu>
        </div>
    );
};

export default SearchMenu;