"use strict";

var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/taggedTemplateLiteral"));
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _classnames = _interopRequireDefault(require("classnames"));
var _util = require("./util");
var _styles = require("../../../base/styles");
var _keyCode = _interopRequireDefault(require("../../../utils/keyCode"));
var _templateObject;
function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? _Object$getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var DefaultFilterContentStyle = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n  border-radius: 2px;\n  width: 100%;\n\n  ", "\n  .filter-option-list {\n    display: flex;\n    flex-direction: column;\n    margin-top: 8px;\n    ul {\n      margin: 0;\n      padding: 0;\n      li {\n        display: flex;\n        position: relative;\n        flex-shrink: 0;\n        height: 32px;\n        align-items: center;\n        border-radius: 2px;\n        font-size: 12px;\n        color: var(--color);\n        padding: 0 12px;\n        overflow: hidden;\n        cursor: pointer;\n        &:hover{\n          background-color: var(--primary-color-level1);\n        }\n      }\n      li.active{\n        background-color: var(--primary-color-level1);\n      }\n    }\n  }\n\n  .filter-search {\n    display: flex;\n    padding: 6px 12px;\n\n    .filter-search-inner {\n      width: 100%;\n      font-size: 12px;\n      color: #333333;\n      height: 28px;\n      line-height: 28px;\n      padding: 0 8px;\n      outline: none;\n      background-color: #FAFAFA;\n      border-radius: 2px;\n      border: 1px solid var(--strong-border-color);\n      &:hover{\n        border-color: var(--primary-color)\n      } \n      &:focus{\n        border-color: var(--primary-color)\n      }  \n    }\n  }\n\n  .filter-footer {\n    display: flex;\n    flex-direction: row;\n    padding: 8px 12px;\n    justify-content: space-between;\n\n    .filter-btn {\n      text-align: center;\n      font-size: 12px;\n      width: 60px;\n      height: 24px;\n      line-height: 24px;\n    }\n    \n  }\n"])), _styles.ButtonCSS);
function DefaultFilterContent(_ref) {
  var setFilterModel = _ref.setFilterModel,
    filterModel = _ref.filterModel,
    hidePanel = _ref.hidePanel,
    _ref$localeText = _ref.localeText,
    localeText = _ref$localeText === void 0 ? {} : _ref$localeText;
  var _a, _b;
  var _React$useState = _react.default.useState((filterModel === null || filterModel === void 0 ? void 0 : filterModel.filterCondition) || 'contain'),
    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
    selectedValue = _React$useState2[0],
    setSelectedValue = _React$useState2[1];
  var _React$useState3 = _react.default.useState((filterModel === null || filterModel === void 0 ? void 0 : (0, _filter.default)(filterModel)) || []),
    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
    innerValue = _React$useState4[0],
    setInnerValue = _React$useState4[1];
  var inputRef = (0, _react.useRef)();
  var handleClick = _react.default.useCallback(function (option) {
    setSelectedValue(option.key);
  }, []);
  var reset = function reset() {
    hidePanel();
    setFilterModel();
  };
  var confirm = function confirm() {
    hidePanel();
    setFilterModel({
      filter: innerValue,
      filterCondition: selectedValue
    });
  };
  var handleKeyDown = function handleKeyDown(e) {
    if (e.keyCode === _keyCode.default.ENTER) {
      confirm();
    }
  };
  (0, _react.useEffect)(function () {
    setSelectedValue((filterModel === null || filterModel === void 0 ? void 0 : filterModel.filterCondition) || 'contain');
    setInnerValue((filterModel === null || filterModel === void 0 ? void 0 : (0, _filter.default)(filterModel)) || []);
  }, [filterModel]);
  (0, _react.useEffect)(function () {
    // 兼容设置焦点后发生滚动
    setTimeout(function () {
      var _a;
      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({
        preventScroll: true
      });
    });
  }, []);
  return /*#__PURE__*/_react.default.createElement(DefaultFilterContentStyle, null, /*#__PURE__*/_react.default.createElement("div", {
    className: 'filter-option-list'
  }, /*#__PURE__*/_react.default.createElement("ul", null, (0, _map.default)(_util.DEFAULT_FILTER_OPTIONS).call(_util.DEFAULT_FILTER_OPTIONS, function (option, index) {
    var _a;
    return (
      /*#__PURE__*/
      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
      _react.default.createElement("li", {
        key: option.key,
        className: option.key === selectedValue ? 'active' : '',
        onClick: function onClick() {
          return handleClick(option);
        }
      }, (_a = localeText[option.key]) !== null && _a !== void 0 ? _a : option.title)
    );
  }))), selectedValue !== 'notIsNull' && selectedValue !== 'isNull' && (/*#__PURE__*/_react.default.createElement("div", {
    className: 'filter-search'
  }, /*#__PURE__*/_react.default.createElement("input", {
    className: 'filter-search-inner',
    value: innerValue[0],
    onChange: function onChange(e) {
      setInnerValue([e.target.value]);
    },
    onKeyDown: handleKeyDown,
    ref: inputRef
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: 'filter-footer'
  }, /*#__PURE__*/_react.default.createElement("button", {
    className: (0, _classnames.default)((0, _defineProperty2.default)({
      'filter-btn': true
    }, _styles.Classes.button, true)),
    onClick: reset
  }, (_a = localeText.resetFilter) !== null && _a !== void 0 ? _a : '重置'), /*#__PURE__*/_react.default.createElement("button", {
    className: (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
      'filter-btn': true
    }, _styles.Classes.button, true), _styles.Classes.buttonPrimary, true)),
    onClick: confirm
  }, (_b = localeText.confirmFilter) !== null && _b !== void 0 ? _b : '确定')));
}
var _default = exports.default = DefaultFilterContent;