'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var IconFilterFunnel = require('../../../../../_Icon/Icons/IconFilterFunnel.js');
var HeadCell = require('../../HeadCell.js');
var Table_styles = require('../../../../Table.styles.js');
var Table_tokens = require('../../../../Table.tokens.js');
var Filter_styles = require('./Filter.styles.js');
var useDidMountEffect = require('../../../../../../hooks/useDidMountEffect.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var _StyledIndicator, _StyledDivider;
var getSelectWidth = function getSelectWidth(size) {
  switch (size) {
    case 'l':
      {
        return '18.75rem';
      }
    case 'm':
      {
        return '16rem';
      }
    case 's':
      {
        return '14rem';
      }
    default:
      {
        return '14rem';
      }
  }
};
var isFilterChanged = function isFilterChanged(outerFiltered, localFiltered) {
  return outerFiltered.length !== localFiltered.length || new Set([].concat(_rollupPluginBabelHelpers.toConsumableArray(outerFiltered), _rollupPluginBabelHelpers.toConsumableArray(localFiltered))).size !== outerFiltered.length;
};
var Filter = function Filter(_ref) {
  var _header$column;
  var header = _ref.header,
    size = _ref.size,
    outerFiltered = _ref.outerFiltered,
    tableContainerRef = _ref.tableContainerRef;
  var filtered = header.column.getFilterValue() || [];
  var _useState = React.useState(filtered || []),
    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
    localFiltered = _useState2[0],
    setLocalFiltered = _useState2[1];
  var _ref2 = (header === null || header === void 0 || (_header$column = header.column) === null || _header$column === void 0 || (_header$column = _header$column.columnDef) === null || _header$column === void 0 ? void 0 : _header$column.meta) || {},
    filters = _ref2.filters;
  var isDisabled = !isFilterChanged(filtered, localFiltered);
  var handleFilterSubmit = function handleFilterSubmit() {
    header.column.setFilterValue(localFiltered);
  };
  var handleReset = function handleReset() {
    setLocalFiltered([]);
  };
  var handleToggle = function handleToggle(opened) {
    if (!opened) {
      setLocalFiltered(header.column.getFilterValue() || []);
    }
  };
  useDidMountEffect.useDidMountEffect(function () {
    setLocalFiltered(filtered);
  }, [outerFiltered]);
  return /*#__PURE__*/React__default.default.createElement(Filter_styles.Select
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  , {
    placement: "bottom-end",
    multiselect: true,
    value: localFiltered,
    onChange: setLocalFiltered,
    renderTarget: function renderTarget() {
      return /*#__PURE__*/React__default.default.createElement(Filter_styles.IconFilterWrapper, null, /*#__PURE__*/React__default.default.createElement(IconFilterFunnel.IconFilterFunnel, {
        size: HeadCell.getIconSize(size),
        className: Table_tokens.classes.filterIcon
      }), filtered.length ? _StyledIndicator || (_StyledIndicator = /*#__PURE__*/React__default.default.createElement(Filter_styles.StyledIndicator, {
        size: "s",
        view: "accent"
      })) : undefined);
    },
    items: filters || [],
    portal: tableContainerRef,
    listWidth: getSelectWidth(size),
    onToggle: handleToggle,
    afterList: /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, _StyledDivider || (_StyledDivider = /*#__PURE__*/React__default.default.createElement(Filter_styles.StyledDivider, {
      orientation: "horizontal",
      length: "auto"
    })), /*#__PURE__*/React__default.default.createElement(Filter_styles.ControlPanel, null, /*#__PURE__*/React__default.default.createElement(Table_styles.LinkButton, {
      onClick: handleReset
    }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440"), /*#__PURE__*/React__default.default.createElement(Table_styles.ButtonAccent, {
      disabled: isDisabled,
      onClick: handleFilterSubmit
    }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C")))
  });
};

exports.Filter = Filter;
