import { _ as _slicedToArray } from '../slicedToArray-BB-AwwkK.js';
import React__default from 'react';
import Popover, { usePopover, PopoverButton, PopoverContent } from '../popover/index.js';
import Icon from '../icon/index.js';
import EditFilter from './edit-filter.js';
import { useFilterType } from './filter-type-context.js';
import useKey from './use-key.js';
import { IconButton } from '../button/index.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 '../use-previous/index.js';
import '../typeof-CgC7Bq6K.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 '../select-menu/index.js';
import '../select-menu-BvA3x4Nf.js';
import '../floating-ui.react-cWPyyUrN.js';
import '../toConsumableArray-dKQYsfpV.js';
import '../index-qSfOyGhk.js';
import '../_commonjsHelpers-_1FafXWI.js';
import '../label/index.js';
import '@reach/visually-hidden';
import '../ck-icon/index.js';
import '../ck-icon/assets/icon-map/index.js';
import '../select-menu/autocomplete.js';
import '../button/button-group.js';

function Filter(_ref) {
  var index = _ref.index,
      filter = _ref.filter,
      onSave = _ref.onSave,
      onRemove = _ref.onRemove;
  var popover = usePopover();
  var filterType = useFilterType(filter.type);

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

  var View = filterType.View;
  var icon = filterType.icon(filter);
  var label = filterType.label(filter);

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

  var handleRemove = function handleRemove() {
    onRemove(index);
  };

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

  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Popover, {
    label: "edit filter",
    popover: popover,
    arrow: false
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "relative group"
  }, /*#__PURE__*/React__default.createElement(PopoverButton, {
    className: "px-4 py-2 w-full bg-white text-gray-900 text-left border border-white shadow-lg focus:outline-blue",
    style: {
      minHeight: "70px"
    },
    "aria-label": "Edit filter ".concat(label)
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "flex items-center"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "w-10 text-blue-500 text-xl"
  }, icon && /*#__PURE__*/React__default.createElement(Icon, {
    icon: icon
  })), /*#__PURE__*/React__default.createElement("div", {
    className: "text-blue-500 font-semibold"
  }, /*#__PURE__*/React__default.createElement(View, {
    filter: filter
  })))), /*#__PURE__*/React__default.createElement(IconButton, {
    label: "remove filter",
    icon: "close",
    is: "plain",
    type: "button",
    onClick: handleRemove,
    className: "absolute right-0 top-0 mr-1 mt-1 focus:outline-blue rounded-sm border border-transparent text-gray-700 opacity-0 group-hover:opacity-100 focus:opacity-100"
  })), /*#__PURE__*/React__default.createElement(PopoverContent, {
    className: "z-10",
    style: {
      top: "-69px"
    }
  }, /*#__PURE__*/React__default.createElement(EditFilter, {
    key: key,
    filter: filter,
    onCancel: handleCancel,
    onSave: handleSave
  }))));
}

export { Filter as default };
