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 React, { useEffect } from 'react';
import { createPortal } from 'react-dom';
import styled from 'styled-components';
import { Classes } from '../../../base/styles';
import FilterPanel from './FilterPanel';
import DefaultFilterContent from './DefaultFilterContent';
import { calculatePopupRelative } from '../../../utils';
import { addResizeObserver } from '../../../base/utils';
import cx from 'classnames';
var HEADER_ICON_OFFSET_Y = 6 + 1; // padding-top + border

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

var FilterIconSpanStyle = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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.useRef(null);

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

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

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

  useEffect(function () {
    var resizeObserver = addResizeObserver(filterPanelRef.current.children[0], handleFilterPanelResize);
    return function () {
      resizeObserver && resizeObserver.disconnect();
    };
  }, []);
  return /*#__PURE__*/React.createElement("div", {
    ref: filterPanelRef
  }, /*#__PURE__*/React.createElement(FilterPanel, {
    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.useState(false),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      showPanel = _React$useState4[0],
      setShowPanel = _React$useState4[1];

  var iconRef = React.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.createElement(FilterPanelContent, {
        setFilter: setFilter,
        filterModel: filterModel,
        isFilterActive: isFilterActive,
        hidePanel: hidePanel
      });
    } else {
      return /*#__PURE__*/React.createElement(DefaultFilterContent, {
        setFilterModel: setFilterModel,
        filterModel: filterModel,
        isFilterActive: isFilterActive,
        hidePanel: hidePanel
      });
    }
  };

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

    setShowPanel(true);
  };

  var iconClassName = cx((_cx = {}, _defineProperty(_cx, className, true), _defineProperty(_cx, 'filter-panel-open', showPanel), _cx));
  return /*#__PURE__*/React.createElement(FilterIconSpanStyle, {
    style: style,
    className: iconClassName,
    onMouseDown: handleMouseDown,
    ref: iconRef
  }, /*#__PURE__*/React.createElement("span", {
    className: Classes.filterIcon,
    onClick: handleIconClick
  }, filterIcon || /*#__PURE__*/React.createElement("svg", {
    width: size,
    height: size,
    viewBox: "64 64 896 896",
    focusable: "false",
    "data-icon": "filter",
    fill: "currentColor",
    "aria-hidden": "true"
  }, /*#__PURE__*/React.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__*/createPortal( /*#__PURE__*/React.createElement(Panel, {
    ele: iconRef.current,
    filterIcon: filterIcon,
    hidePanel: hidePanel,
    renderPanelContent: renderPanelContent
  }), document.body));
}

export default Filter;