import React, { useState } from "react";
import { useDidMountEffect } from "../../../../../../hooks";
import { IconFilterFunnel } from "../../../../../_Icon";
import { getIconSize } from "../../HeadCell";
import { ButtonAccent, LinkButton } from "../../../../Table.styles";
import { classes } from "../../../../Table.tokens";
import { IconFilterWrapper, StyledIndicator, Select, StyledDivider, ControlPanel } from "./Filter.styles";
const getSelectWidth = (size)=>{
    switch(size){
        case 'l':
            {
                return '18.75rem';
            }
        case 'm':
            {
                return '16rem';
            }
        case 's':
            {
                return '14rem';
            }
        default:
            {
                return '14rem';
            }
    }
};
const isFilterChanged = (outerFiltered, localFiltered)=>{
    return outerFiltered.length !== localFiltered.length || new Set([
        ...outerFiltered,
        ...localFiltered
    ]).size !== outerFiltered.length;
};
export const Filter = ({ header, size, outerFiltered, tableContainerRef })=>{
    const filtered = header.column.getFilterValue() || [];
    const [localFiltered, setLocalFiltered] = useState(filtered || []);
    const { filters } = header?.column?.columnDef?.meta || {};
    const isDisabled = !isFilterChanged(filtered, localFiltered);
    const handleFilterSubmit = ()=>{
        header.column.setFilterValue(localFiltered);
    };
    const handleReset = ()=>{
        setLocalFiltered([]);
    };
    const handleToggle = (opened)=>{
        if (!opened) {
            setLocalFiltered(header.column.getFilterValue() || []);
        }
    };
    useDidMountEffect(()=>{
        setLocalFiltered(filtered);
    }, [
        outerFiltered
    ]);
    return /*#__PURE__*/ React.createElement(Select, {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        placement: "bottom-end",
        multiselect: true,
        value: localFiltered,
        onChange: setLocalFiltered,
        renderTarget: ()=>/*#__PURE__*/ React.createElement(IconFilterWrapper, null, /*#__PURE__*/ React.createElement(IconFilterFunnel, {
                size: getIconSize(size),
                className: classes.filterIcon
            }), filtered.length ? /*#__PURE__*/ React.createElement(StyledIndicator, {
                size: "s",
                view: "accent"
            }) : undefined),
        items: filters || [],
        portal: tableContainerRef,
        listWidth: getSelectWidth(size),
        onToggle: handleToggle,
        afterList: /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(StyledDivider, {
            orientation: "horizontal",
            length: "auto"
        }), /*#__PURE__*/ React.createElement(ControlPanel, null, /*#__PURE__*/ React.createElement(LinkButton, {
            onClick: handleReset
        }, "Сбросить фильтр"), /*#__PURE__*/ React.createElement(ButtonAccent, {
            disabled: isDisabled,
            onClick: handleFilterSubmit
        }, "Применить")))
    });
};
