"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 _templateObject;

function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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 _cx2;

  var setFilterModel = _ref.setFilterModel,
      filterModel = _ref.filterModel,
      hidePanel = _ref.hidePanel;

  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 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
    });
  };

  (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]);
  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) {
    return (
      /*#__PURE__*/
      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
      _react.default.createElement("li", {
        key: index,
        className: option.key === selectedValue ? 'active' : '',
        onClick: function onClick() {
          return handleClick(option);
        }
      }, 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,
    onChange: function onChange(e) {
      setInnerValue(e.target.value);
    }
  })), /*#__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
  }, "\u91CD\u7F6E"), /*#__PURE__*/_react.default.createElement("button", {
    className: (0, _classnames.default)((_cx2 = {
      'filter-btn': true
    }, (0, _defineProperty2.default)(_cx2, _styles.Classes.button, true), (0, _defineProperty2.default)(_cx2, _styles.Classes.buttonPrimary, true), _cx2)),
    onClick: confirm
  }, "\u786E\u5B9A")));
}

var _default = DefaultFilterContent;
exports.default = _default;