import _extends from "@babel/runtime-corejs3/helpers/extends";
import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplateLiteral";

var _templateObject;

import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { isElementInEventPath, keepWithinBounds } from '../../../utils/';
var FilterPanelStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  max-height: 450px;\n  min-width: 160px;\n  border-radius: 2px;\n  background-color: #fff;\n  box-shadow: 0 0 5px 0 rgba(154,154,154,.5);\n  cursor: default;\n\n  .popup-header {\n    display: flex;\n    background-color: #ebedf1;\n\n    .popup-header-icon {\n      color:#666;\n      background-color: #fff;\n      padding: 6px 16px 6px 16px;\n      display: inline-block;\n      border-right: 1px solid transparent;\n      border-left: 1px solid transparent;\n      border-top: 1px solid transparent;\n      border-top-right-radius: 2px;\n      border-top-left-radius: 2px;\n    }\n  }\n\n  .popup-body {\n    display: flex;\n  }\n"])));

var useWindowEvents = function useWindowEvents(func, evens) {
  React.useEffect(function () {
    evens.forEach(function (event) {
      return window.addEventListener(event, func, true);
    });
    return function () {
      return evens.forEach(function (event) {
        return window.removeEventListener(event, func, true);
      });
    };
  }, [evens, func]);
};

function FilterPanel(_ref) {
  var style = _ref.style,
      children = _ref.children,
      position = _ref.position,
      filterIcon = _ref.filterIcon,
      onClose = _ref.onClose;

  var _useState = useState(position),
      _useState2 = _slicedToArray(_useState, 2),
      perfectPosition = _useState2[0],
      setPerfectPosition = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      visible = _useState4[0],
      setVisible = _useState4[1];

  var ref = React.useRef(null);

  var isContainPanel = function isContainPanel(e) {
    return isElementInEventPath(ref.current, e);
  };

  useEffect(function () {
    setPerfectPosition(keepWithinBounds(document.body, ref.current, position.x, position.y, true));
    setVisible(true);
  }, [position]);
  useWindowEvents(function (e) {
    return !isContainPanel(e) && onClose();
  }, ['mousedown']);
  return /*#__PURE__*/React.createElement(FilterPanelStyle, {
    style: _extends(_extends({}, style), {
      left: visible ? perfectPosition.x : 0,
      top: visible ? perfectPosition.y : 0,
      opacity: visible ? 1 : 0
    }),
    ref: ref
  }, /*#__PURE__*/React.createElement("div", {
    className: 'popup-header'
  }, /*#__PURE__*/React.createElement("span", {
    className: 'popup-header-icon'
  }, filterIcon || /*#__PURE__*/React.createElement("svg", {
    width: 14,
    height: 14,
    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"
  })))), /*#__PURE__*/React.createElement("div", {
    className: "popup-body"
  }, children));
}

export default FilterPanel;