import { ExpandMore, ExpandMoreOutlined } from "@mui/icons-material";
import { Accordion, AccordionDetails, AccordionSummary, Checkbox, Divider, FormControlLabel, List, ListItem, MenuItem, OutlinedInput, Select, TextField } from "@mui/material";
import React from "react";
import CloseIcon from "../../../components/aisera-icons/custom/CloseIcon";
import { FilterData } from "../Filter";
import './filter-dropdown.scss';


interface Option {
    label: string;
    value?: string | number;
    filterOptions?: any;
    isSelected?: boolean;
    defaultSelected?: any[];
}

export interface FilterOptions {
    label: string;
    type?: string;
    value: string
    options?: Option[];
    onClear: (groupIndex: number, optionIndex: number, filter: FilterData | undefined) => void;
    groupIndex?: number | undefined;
    optionIndex?: number | undefined;
    hideClearIcon?: boolean;
    onChangeFilter: (filterData: FilterData) => void;
    defaultSelected: string[];
}

const FilterDropdown = ({ label, type, value, options, onClear, groupIndex, optionIndex, onChangeFilter, hideClearIcon, defaultSelected }: FilterOptions) => {
    const [selectedOptions, setSelectedOptions] = React.useState<Option[]>([]);
    const [unselectedOptions, setUnselectedOptions] = React.useState<Option[]>(options || []);

    React.useEffect(() => {
        if (defaultSelected) {
            const { matchedRecords, unmatchedRecords } = unselectedOptions.reduce((acc: { matchedRecords: Option[], unmatchedRecords: Option[] }, option: Option) => {
                if (defaultSelected.some(val => val === option.value)) {
                    acc.matchedRecords.push(option);
                } else {
                    acc.unmatchedRecords.push(option);
                }
                return acc;
            }, { matchedRecords: [], unmatchedRecords: [] });
            setSelectedOptions(matchedRecords as Option[]);
            setUnselectedOptions(unmatchedRecords as Option[]);
        }

    }, []);

    const [filterData, setFilterData] = React.useState<FilterData>();
    const [searchText, setSearchText] = React.useState<string | null>(null);
    const [filteredSelectedOptions, setFilteredSelectedOptions] = React.useState<Option[]>([]);
    const [filteredUnSelectedOptions, setFilteredUnSelectedOptions] = React.useState<Option[]>([]);

    const handleSelectAll = () => {
        setSelectedOptions([...selectedOptions, ...unselectedOptions]);
        setUnselectedOptions([]);
        handleChange();
    };

    const filteredOptions = (searchText: string) => {
        setSearchText(searchText);
    }

    const handleDeselectAll = () => {
        setUnselectedOptions([...unselectedOptions, ...selectedOptions]);
        setSelectedOptions([]);
        // setFilterData({ field: value, operand: [], operator: '', type: type || '' });
    };

    const handleToggleOption = (e: any, option: Option, isSelected: boolean) => {
        e.stopPropagation();
        if (isSelected) {
            setSelectedOptions(selectedOptions.filter(o => o.value !== option.value));
            setUnselectedOptions([...unselectedOptions, option]);
        } else {
            setUnselectedOptions(unselectedOptions.filter(o => o.value !== option.value));
            setSelectedOptions([...selectedOptions, option]);
        }

    };

    const handleCheckboxClick = (event: React.MouseEvent) => {
        event.stopPropagation();
    };

    const handleChange = () => {
        const operands = selectedOptions?.length > 0 ? selectedOptions?.map(item => item.value) : undefined;
        const newFilterData = {
            field: value,
            operand: operands,
            type: type,
            operator: 'IN'
        };
        setFilterData(newFilterData as FilterData);
    };

    const closeFilter = (groupIndex: number | undefined, optionIndex: number | undefined) => {
        // setFilterData({ field: value, operand: [], operator: '', type: type || '' })
        setSelectedOptions([]);
        if (groupIndex != undefined && optionIndex != null) {
            onClear(groupIndex, optionIndex, filterData);
        }
        handleSearchFiltereData();
    }

    const handleSearchFiltereData = () => {
        if (searchText) {
            // setFilteredSelectedOptions(selectedOptions.filter(o => o?.label?.toLowerCase().includes(searchText?.toLowerCase())));
            setFilteredUnSelectedOptions(unselectedOptions.filter(o => o?.label?.toLowerCase().includes(searchText?.toLowerCase())));
        }

    }


    React.useEffect(() => {
        handleSearchFiltereData();
    }, [selectedOptions, unselectedOptions]);

    React.useEffect(() => {
        handleChange();
    }, [selectedOptions, unselectedOptions]);

    React.useEffect(() => {
        (filterData) ? onChangeFilter(filterData) : {};
    }, [filterData]);

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

    return (
        <div className="filter-popup-container">
            <Select
                labelId="demo-multiple-checkbox-label"
                id="demo-multiple-checkbox"
                multiple
                label="Select"
                displayEmpty={true}
                value={selectedOptions}
                input={<OutlinedInput />}
                defaultValue={selectedOptions}
                IconComponent={ExpandMore}
                startAdornment={
                    !hideClearIcon && (<div className="close-icon" onClick={() => closeFilter(groupIndex, optionIndex)}>
                        <CloseIcon></CloseIcon></div>)
                }
                MenuProps={{
                    anchorOrigin: {
                        vertical: "bottom",
                        horizontal: "left",
                    },
                    transformOrigin: {
                        vertical: "top",
                        horizontal: "left",
                    },
                    className: "select-menu-prop",
                }}
                renderValue={(selected: Option[]) =>
                (
                    <div className="input-field">
                        <div className="label">{label}:</div>
                        <div className="selected-val">
                            {selected?.length > 0 ? (selected.map((item) => item.label).reverse().join(', ')) : 'All'}
                        </div>
                    </div>
                )}
            >
                {type !== 'created_on' && (
                    <div className='popup-content'>
                        <TextField className="search-field menu-padding" variant='outlined' size='small' onChange={(e) => filteredOptions(e.target.value)}>
                        </TextField>
                        <Divider></Divider>
                        <Accordion className="accordion-wrapper" defaultExpanded elevation={0}>
                            <AccordionSummary
                                expandIcon={<ExpandMoreOutlined />}
                                aria-controls="panel1a-content"
                                id="panel1a-header"
                            >
                                <List>
                                    <ListItem>
                                        <FormControlLabel className="menu-padding selection-title" onClick={handleCheckboxClick}
                                            control={
                                                <Checkbox onClick={handleCheckboxClick}
                                                    checked={selectedOptions.length === options?.length}
                                                    onChange={selectedOptions.length > 0 ? handleDeselectAll : handleSelectAll}
                                                    indeterminate={(options && selectedOptions.length > 0) && selectedOptions.length < options?.length}
                                                />
                                            }
                                            label={`SELECTION (${selectedOptions.length})`}
                                        />
                                    </ListItem>
                                </List>
                            </AccordionSummary>
                            <AccordionDetails>
                                {selectedOptions?.map(option => (
                                    <MenuItem key={option.value}>
                                        <FormControlLabel className="menu-padding menu-labels"
                                            control={
                                                <Checkbox
                                                    checked={true}
                                                    onChange={(e) => handleToggleOption(e, option, true)}
                                                    onClick={handleCheckboxClick}
                                                />
                                            }
                                            label={option.label}
                                        />
                                    </MenuItem>
                                ))}
                            </AccordionDetails>
                        </Accordion>
                        <Divider></Divider>
                        {
                            searchText ? (
                                filteredUnSelectedOptions?.map(option => (
                                    <MenuItem key={option.value} >
                                        <FormControlLabel className='menu-padding menu-labels'
                                            control={
                                                <Checkbox
                                                    checked={false}
                                                    onChange={(e) => handleToggleOption(e, option, false)}
                                                    onClick={handleCheckboxClick}
                                                />
                                            }
                                            label={option.label}
                                        />
                                    </MenuItem>
                                ))
                            ) : (
                                unselectedOptions?.map(option => (
                                    <MenuItem key={option.value} >
                                        <FormControlLabel className='menu-padding menu-labels'
                                            control={
                                                <Checkbox
                                                    checked={false}
                                                    onChange={(e) => handleToggleOption(e, option, false)}
                                                    onClick={handleCheckboxClick}
                                                />
                                            }
                                            label={option.label}
                                        />
                                    </MenuItem>
                                ))
                            )
                        }
                    </div>
                )}
            </Select>
        </div>
    )
}

export default FilterDropdown