import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplateLiteral";

var _templateObject;

import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
import React, { useEffect, useRef } from 'react';
import styled from 'styled-components';
import cx from 'classnames';
import { DEFAULT_FILTER_OPTIONS } from './util';
import { Classes, ButtonCSS } from '../../../base/styles';
import KeyCode from '../../../utils/keyCode';
var DefaultFilterContentStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), ButtonCSS);

function DefaultFilterContent(_ref) {
  var _cx2;

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

  var _React$useState = React.useState((filterModel === null || filterModel === void 0 ? void 0 : filterModel.filterCondition) || 'contain'),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      selectedValue = _React$useState2[0],
      setSelectedValue = _React$useState2[1];

  var _React$useState3 = React.useState((filterModel === null || filterModel === void 0 ? void 0 : _filterInstanceProperty(filterModel)) || ''),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      innerValue = _React$useState4[0],
      setInnerValue = _React$useState4[1];

  var inputRef = useRef();
  var handleClick = React.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.ENTER) {
      confirm();
    }
  };

  useEffect(function () {
    setSelectedValue((filterModel === null || filterModel === void 0 ? void 0 : filterModel.filterCondition) || 'contain');
    setInnerValue((filterModel === null || filterModel === void 0 ? void 0 : _filterInstanceProperty(filterModel)) || '');
  }, [filterModel]);
  useEffect(function () {
    // 兼容设置焦点后发生滚动
    setTimeout(function () {
      var _a;

      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({
        preventScroll: true
      });
    });
  }, []);
  return /*#__PURE__*/React.createElement(DefaultFilterContentStyle, null, /*#__PURE__*/React.createElement("div", {
    className: 'filter-option-list'
  }, /*#__PURE__*/React.createElement("ul", null, _mapInstanceProperty(DEFAULT_FILTER_OPTIONS).call(DEFAULT_FILTER_OPTIONS, function (option, index) {
    return (
      /*#__PURE__*/
      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
      React.createElement("li", {
        key: index,
        className: option.key === selectedValue ? 'active' : '',
        onClick: function onClick() {
          return handleClick(option);
        }
      }, option.title)
    );
  }))), selectedValue !== 'notIsNull' && selectedValue !== 'isNull' && /*#__PURE__*/React.createElement("div", {
    className: 'filter-search'
  }, /*#__PURE__*/React.createElement("input", {
    className: 'filter-search-inner',
    value: innerValue,
    onChange: function onChange(e) {
      setInnerValue(e.target.value);
    },
    onKeyDown: handleKeyDown,
    ref: inputRef
  })), /*#__PURE__*/React.createElement("div", {
    className: 'filter-footer'
  }, /*#__PURE__*/React.createElement("button", {
    className: cx(_defineProperty({
      'filter-btn': true
    }, Classes.button, true)),
    onClick: reset
  }, "\u91CD\u7F6E"), /*#__PURE__*/React.createElement("button", {
    className: cx((_cx2 = {
      'filter-btn': true
    }, _defineProperty(_cx2, Classes.button, true), _defineProperty(_cx2, Classes.buttonPrimary, true), _cx2)),
    onClick: confirm
  }, "\u786E\u5B9A")));
}

export default DefaultFilterContent;