import { _ as _slicedToArray } from '../slicedToArray-BB-AwwkK.js';
import React__default from 'react';
import Popover, { usePopover, PopoverButton, PopoverContent } from '../popover/index.js';
import EditFilter from './edit-filter.js';
import useKey from './use-key.js';
import '../defineProperty-CEd-kZQW.js';
import '../extends-C4cduGrv.js';
import '../objectWithoutProperties-TXwlfNxG.js';
import 'prop-types';
import '../portal/index.js';
import 'react-dom';
import '../use-rerender-once/index.js';
import '../use-force-update/index.js';
import 'classnames';
import '../button/index.js';
import '@reach/visually-hidden';
import '../ck-icon/index.js';
import '../ck-icon/assets/icon-map/index.js';
import '../icon/index.js';
import '@fortawesome/react-fontawesome';
import '../icon/icons.js';
import '../icon/library.js';
import '@fortawesome/fontawesome-svg-core';
import '@fortawesome/pro-solid-svg-icons';
import '@fortawesome/pro-light-svg-icons';
import '@fortawesome/free-brands-svg-icons';
import '../floating-ui.react-cWPyyUrN.js';
import '../typeof-CgC7Bq6K.js';
import '../toConsumableArray-dKQYsfpV.js';
import '../index-qSfOyGhk.js';
import '../button/button-group.js';
import '../use-previous/index.js';
import './filter-type-context.js';
import '../select-menu/index.js';
import '../select-menu-BvA3x4Nf.js';
import '../_commonjsHelpers-_1FafXWI.js';
import '../label/index.js';
import '../select-menu/autocomplete.js';

var initialValue = {
  type: "all_subscribers"
};

function AddFilter(_ref) {
  var onSave = _ref.onSave;
  var popover = usePopover();

  var _useKey = useKey(),
      _useKey2 = _slicedToArray(_useKey, 2),
      key = _useKey2[0],
      resetKey = _useKey2[1];

  var handleSave = function handleSave(filter) {
    onSave(filter);
    popover.hide();
    resetKey();
  };

  var handleCancel = function handleCancel() {
    popover.hide();
    resetKey();
  };

  return /*#__PURE__*/React__default.createElement(Popover, {
    label: "add-filter",
    arrow: false,
    popover: popover
  }, /*#__PURE__*/React__default.createElement(PopoverButton, {
    is: "secondary",
    className: "w-full"
  }, "Add Filter"), /*#__PURE__*/React__default.createElement(PopoverContent, {
    style: {
      top: "-72px",
      bottom: "auto"
    },
    className: "outline-none z-10",
    "aria-label": "Welcome"
  }, /*#__PURE__*/React__default.createElement(EditFilter, {
    key: key,
    filter: initialValue,
    onSave: handleSave,
    onCancel: handleCancel
  })));
}

export { AddFilter as default };
