import ArrowDownChevron from "@components/aisera-icons/custom/ArrowDownChevron";
import CreateFilterIcon from "@components/aisera-icons/custom/CreateFilterIcon";
import FilterIcon from "@components/aisera-icons/custom/FilterIcon";
import SettingsIcon from "@components/aisera-icons/custom/SettingsIcon";
import Button from "@components/Button/Button";
import { Divider } from "@components/Divider/Divider";
import { ListSubheader, Menu, MenuItem } from "@mui/material";
import React from "react";
import ManageFilterPopup from "../ManageFilter/ManageFilterPopup";
import SaveFilterPopup from "../SaveFilter/SaveFilterPopup";
import "./filter-menu.scss";

export interface Option {
    label: string;
    value: string;
}

export interface FilterProps {
    options: Option[];
    onSaveClick: (filter: any) => void;
}

const optionsData = [
    { label: "filter 1", value: "filter1" },
    { label: "filter 2", value: "filter2" },
    { label: "filter 3", value: "filter3" },
];

const FilterMenu = ({ options, onSaveClick }: FilterProps) => {

    const [openManageFilter, setOpenManageFilter] = React.useState(false);
    const [openSaveFilter, setOpenSaveFilter] = React.useState(false);

    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const open = Boolean(anchorEl);

    const [filter, setFilter] = React.useState<Option[]>(optionsData);

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

    const handleManageFilterClose = (newValue?: string) => {
        setOpenManageFilter(false);

        // if (newValue) {
        //   setValue(newValue);
        // }
    };

    const handelSaveFilterClose = (newValue?: string) => {
        setOpenSaveFilter(false);
    };

    const handleMangeFilterOpen = () => {
        setOpenManageFilter(true);
        handleClose();
    };

    const handleSaveFilterOpen = () => {
        setOpenSaveFilter(true);
        handleClose();
    };

    const handleOnChangeFilter = (index: number) => {
        const prevFilter = [...filter];
        prevFilter.splice(index, 1);
        setFilter(prevFilter);
    };

    const handleSaveFilter = (newFilter: any) => {
        setFilter([...filter, newFilter]);
        onSaveClick(filter);
    };

    const handleOnClickOk = (newFilter: any) => {
        console.log('new filter in clickok :::: ', newFilter);
        setFilter(newFilter);
    }

    React.useEffect(() => { }, [filter]);

    return (
        <div className="filter-menu-container">
            <Button
                id="basic-button"
                aria-controls={open ? "basic-menu" : undefined}
                aria-haspopup="true"
                aria-expanded={open ? "true" : undefined}
                onClick={handleClick}
                endIcon={<ArrowDownChevron />}
                startIcon={<FilterIcon />}
                variant="outlined"
            ></Button>
            <Menu
                className="filter-menu-wrapper"
                id="basic-menu"
                anchorEl={anchorEl}
                open={open}
                onClose={handleClose}
                MenuListProps={{
                    "aria-labelledby": "basic-button",
                }}
            >
                <ListSubheader className="menu-title">Filters</ListSubheader>
                <ListSubheader className="menu-group">CUSTOM FILTERS</ListSubheader>

                {filter?.map((option) => (
                    <MenuItem
                        key={option.value}
                        value={option.value}
                        onClick={handleClose}
                    >
                        {option.label}
                    </MenuItem>
                ))}

                <Divider></Divider>
                <ListSubheader className="menu-group">MANAGE</ListSubheader>
                <MenuItem
                    className="men-item"
                    onClick={handleSaveFilterOpen}
                    disableRipple
                >
                    <CreateFilterIcon />
                    <span className="manage-label">Save as New Filter</span>
                </MenuItem>
                <MenuItem onClick={handleMangeFilterOpen} disableRipple>
                    <SettingsIcon />
                    <span className="manage-label">Manage Filter</span>
                </MenuItem>
            </Menu>

            <div className="manage-filter">

                {openManageFilter && (
                    <ManageFilterPopup
                        id={"manage-filter-popup"}
                        keepMounted={false}
                        value={""}
                        open={openManageFilter}
                        onClose={handleManageFilterClose}
                        filter={filter}
                        onChangeFilter={handleOnChangeFilter}
                        onClickOk={handleOnClickOk}
                    />
                )}
            </div>

            <div className="save-filter">
                {openSaveFilter && (
                    <SaveFilterPopup
                        id={"save-filter-popup"}
                        value={""}
                        open={openSaveFilter}
                        onClose={handelSaveFilterClose}
                        onSave={handleSaveFilter}
                    ></SaveFilterPopup>
                )}
            </div>
        </div>
    );
};

export default FilterMenu;