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 cx from 'classnames';
import { Classes } from '../../../base/styles';
import FilterPanel from './FilterPanel';
import DefaultFilterContent from './DefaultFilterContent';
import DefaultFilterIcon from './DefaultFilterIcon';
import { calculatePopupRelative } from '../../../utils';
import { addResizeObserver } from '../../../base/utils';
import KeyCode from '../../../utils/keyCode';
var HEADER_ICON_OFFSET_Y = 8 + 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  > .", " {\n    display: flex\n  }\n"])), Classes.filterIcon);

function Panel(_ref) {
  var ele = _ref.ele,
      filterIcon = _ref.filterIcon,
      hidePanel = _ref.hidePanel,
      renderPanelContent = _ref.renderPanelContent,
      hideFilterPopupHeader = _ref.hideFilterPopupHeader,
      popupParent = _ref.popupParent;
  var filterPanelRef = React.useRef(null);

  var _React$useState = React.useState(calculatePopupRelative(ele, popupParent, _getPanelOffset(ele, hideFilterPopupHeader))),
      _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, popupParent, _getPanelOffset(ele, hideFilterPopupHeader)));
  };

  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,
    hideFilterPopupHeader: hideFilterPopupHeader
  }, 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,
      stopESCKeyDownEventPropagation = _ref2.stopESCKeyDownEventPropagation,
      hideFilterPopupHeader = _ref2.hideFilterPopupHeader,
      getPopupParent = _ref2.getPopupParent,
      localeText = _ref2.localeText;

  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 iconWrapRef = React.useRef();

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

  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,
        localeText: localeText
      });
    }
  };

  var handleIconClick = function handleIconClick(e) {
    // 只有当icon区域点击会触发面板展开
    // 防止 createPortal 区域的点击触发该事件
    if (e.currentTarget.contains(e.target)) {
      setShowPanel(true);
    }

    if (stopClickEventPropagation) {
      e.stopPropagation();
    }
  };

  var handleKeyDown = function handleKeyDown(e) {
    if (e.keyCode === KeyCode.ESC) {
      if (e.currentTarget.contains(e.target)) {
        setShowPanel(false);
      }

      if (stopESCKeyDownEventPropagation) {
        e.stopPropagation();
      }
    }
  };

  var iconClassName = cx((_cx = {}, _defineProperty(_cx, className, true), _defineProperty(_cx, 'filter-panel-open', showPanel), _cx));
  var displayFilterIcon = typeof filterIcon === 'function' ? filterIcon(isFilterActive) : filterIcon;
  var popupParent = (getPopupParent === null || getPopupParent === void 0 ? void 0 : getPopupParent(iconWrapRef.current)) || document.body;
  return /*#__PURE__*/React.createElement(FilterIconSpanStyle, {
    style: style,
    className: iconClassName,
    onClick: handleIconClick,
    onKeyDown: handleKeyDown,
    ref: iconWrapRef,
    tabIndex: -1
  }, /*#__PURE__*/React.createElement("span", {
    ref: iconRef,
    className: Classes.filterIcon
  }, displayFilterIcon || /*#__PURE__*/React.createElement(DefaultFilterIcon, {
    width: size,
    height: size
  })), showPanel && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Panel, {
    ele: hideFilterPopupHeader ? iconWrapRef.current : iconRef.current,
    filterIcon: displayFilterIcon,
    hidePanel: hidePanel,
    renderPanelContent: renderPanelContent,
    hideFilterPopupHeader: hideFilterPopupHeader,
    popupParent: popupParent
  }), popupParent));
}

function _getPanelOffset(ele, hideFilterPopupHeader) {
  if (hideFilterPopupHeader) {
    return {
      x: 0,
      y: 0 - ele.offsetHeight
    };
  }

  return {
    x: HEADER_ICON_OFFSET_X,
    y: HEADER_ICON_OFFSET_Y
  };
}

export default Filter;