import React, { useEffect } from "react";
import AddFilter from "./AddFilter/AddFilter";
import "./filter.scss";
import FilterMenu from "./FilterMenu/FilterMenu";
import Search from "./Search/Search";


export interface FilterOptions {
    label: any;
    value: any;
}

export interface Option {
    label: any;
    value: any;
    type?: string;
    hideClearIcon?: boolean;
    filterOptions?: FilterOptions[];
    defaultSelected?: any;
}

export interface GroupOption {
    name: string;
    options: Option[];
}

export interface FilterData {
    field: string;
    operand: any;
    operator: string
    type: string;
}

export interface FilterProps {
    options: GroupOption[];
    defaultOptions: Option[];
    onFilterChange: (filterData: FilterData[]) => void;
    label?: string;
    hideAddFilter?: boolean;
    hideFilterMenu?: boolean;
    hideSearchMenu?: boolean;
    preSelectFilter?: FilterData[] | [];
}

const Filter = ({ options, defaultOptions, onFilterChange, label, hideAddFilter, hideFilterMenu, hideSearchMenu, preSelectFilter }: FilterProps) => {



    const [selectedFilter, setSelectedFilter] = React.useState<FilterData[]>([]);
    const [filterData, setFilterData] = React.useState<FilterData[]>([]);

    const handleSelected = (selected: any) => {
        setSelectedFilter(selected);
    }

    const handleCriteria = (filterData: any) => {
        setFilterData(filterData);
    }

    const handleFilterMenuSave = (filter: any) => {
        localStorage.setItem('new_filter', JSON.stringify(selectedFilter))
    }

    const handleOnChangeEvent = () => {
        onFilterChange(filterData);
    }

    const handleClearAll = () => {
        // handleOnChangeEvent();
    }

    useEffect(() => {
        filterData ? handleOnChangeEvent() : {};
    }, [filterData]);

    return (
        <div className="filter-container">
            {label && (<div className="title">{label}</div>)}
            {!hideFilterMenu && (
                <div>
                    <FilterMenu options={[]} onSaveClick={handleFilterMenuSave}></FilterMenu>
                </div>
            )}
            {!hideSearchMenu && (
                <div>
                    <Search></Search>
                </div>
            )}
            <div>
                <AddFilter
                    options={options}
                    defaultOptions={defaultOptions}
                    onChangeOptions={handleCriteria}
                    hideAddFilter={hideAddFilter}
                    clearAll={handleClearAll}
                    preSelectFilter={preSelectFilter} />
            </div>
        </div>
    );
};

export default Filter;