"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 _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 _reactDom = require("react-dom");

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _styles = require("../../../base/styles");

var _FilterPanel = _interopRequireDefault(require("./FilterPanel"));

var _DefaultFilterContent = _interopRequireDefault(require("./DefaultFilterContent"));

var _utils = require("../../../utils");

var _utils2 = require("../../../base/utils");

var _classnames = _interopRequireDefault(require("classnames"));

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 HEADER_ICON_OFFSET_Y = 6 + 1; // padding-top + border

var HEADER_ICON_OFFSET_X = 16 + 1; // padding-left+ border

var FilterIconSpanStyle = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // position: absolute;\n  // right: 4px;\n  // cursor: pointer;\n  // transform: translateY(-50%);\n  // top: 50%;\n  // height: 12px; \n"])));

function Panel(_ref) {
  var ele = _ref.ele,
      filterIcon = _ref.filterIcon,
      hidePanel = _ref.hidePanel,
      renderPanelContent = _ref.renderPanelContent;

  var filterPanelRef = _react.default.useRef(null);

  var _React$useState = _react.default.useState((0, _utils.calculatePopupRelative)(ele, document.body, {
    x: HEADER_ICON_OFFSET_X,
    y: HEADER_ICON_OFFSET_Y
  })),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      position = _React$useState2[0],
      setPosition = _React$useState2[1];

  var style = {
    position: 'absolute',
    zIndex: 1050
  };

  var handleFilterPanelResize = function handleFilterPanelResize(resize) {
    setPosition((0, _utils.calculatePopupRelative)(ele, document.body, {
      x: HEADER_ICON_OFFSET_X,
      y: HEADER_ICON_OFFSET_Y
    }));
  };

  (0, _react.useEffect)(function () {
    var resizeObserver = (0, _utils2.addResizeObserver)(filterPanelRef.current.children[0], handleFilterPanelResize);
    return function () {
      resizeObserver && resizeObserver.disconnect();
    };
  }, []);
  return /*#__PURE__*/_react.default.createElement("div", {
    ref: filterPanelRef
  }, /*#__PURE__*/_react.default.createElement(_FilterPanel.default, {
    style: style,
    onClose: hidePanel,
    position: position,
    filterIcon: filterIcon
  }, renderPanelContent()));
}

function Filter(_ref2) {
  var _cx;

  var _ref2$size = _ref2.size,
      size = _ref2$size === void 0 ? 12 : _ref2$size,
      style = _ref2.style,
      className = _ref2.className,
      FilterPanelContent = _ref2.FilterPanelContent,
      filterIcon = _ref2.filterIcon,
      setFilter = _ref2.setFilter,
      setFilterModel = _ref2.setFilterModel,
      filterModel = _ref2.filterModel,
      isFilterActive = _ref2.isFilterActive,
      stopClickEventPropagation = _ref2.stopClickEventPropagation;

  var _React$useState3 = _react.default.useState(false),
      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
      showPanel = _React$useState4[0],
      setShowPanel = _React$useState4[1];

  var iconRef = _react.default.useRef(null);

  var hidePanel = function hidePanel() {
    return setShowPanel(false);
  };

  var handleMouseDown = function handleMouseDown(e) {
    e.stopPropagation(); // 阻止触发拖拽
  };

  var renderPanelContent = function renderPanelContent() {
    if (FilterPanelContent) {
      return /*#__PURE__*/_react.default.createElement(FilterPanelContent, {
        setFilter: setFilter,
        filterModel: filterModel,
        isFilterActive: isFilterActive,
        hidePanel: hidePanel
      });
    } else {
      return /*#__PURE__*/_react.default.createElement(_DefaultFilterContent.default, {
        setFilterModel: setFilterModel,
        filterModel: filterModel,
        isFilterActive: isFilterActive,
        hidePanel: hidePanel
      });
    }
  };

  var handleIconClick = function handleIconClick(e) {
    if (stopClickEventPropagation) {
      e.stopPropagation();
    }

    setShowPanel(true);
  };

  var iconClassName = (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, className, true), (0, _defineProperty2.default)(_cx, 'filter-panel-open', showPanel), _cx));
  return /*#__PURE__*/_react.default.createElement(FilterIconSpanStyle, {
    style: style,
    className: iconClassName,
    onMouseDown: handleMouseDown,
    ref: iconRef
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: _styles.Classes.filterIcon,
    onClick: handleIconClick
  }, filterIcon || /*#__PURE__*/_react.default.createElement("svg", {
    width: size,
    height: size,
    viewBox: "64 64 896 896",
    focusable: "false",
    "data-icon": "filter",
    fill: "currentColor",
    "aria-hidden": "true"
  }, /*#__PURE__*/_react.default.createElement("path", {
    d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\r\n              31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\r\n              48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
  }))), showPanel && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(Panel, {
    ele: iconRef.current,
    filterIcon: filterIcon,
    hidePanel: hidePanel,
    renderPanelContent: renderPanelContent
  }), document.body));
}

var _default = Filter;
exports.default = _default;