"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 _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));

var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/taggedTemplateLiteral"));

var _react = _interopRequireWildcard(require("react"));

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

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

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 FilterPanelStyle = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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.default.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 = (0, _react.useState)(position),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      perfectPosition = _useState2[0],
      setPerfectPosition = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      visible = _useState4[0],
      setVisible = _useState4[1];

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

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

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

var _default = FilterPanel;
exports.default = _default;