import React__default, { forwardRef, useRef, useImperativeHandle } from 'react';
import SelectMenu from '../select-menu/index.js';
import { IconButton } from '../button/index.js';
import AddFilter from './add-filter.js';
import Filter from './filter.js';
import useResponsiveValue from '../use-responsive-value/index.js';
import '../extends-C4cduGrv.js';
import '../objectWithoutProperties-TXwlfNxG.js';
import 'prop-types';
import '../select-menu-BvA3x4Nf.js';
import '../slicedToArray-BB-AwwkK.js';
import '../defineProperty-CEd-kZQW.js';
import '../floating-ui.react-cWPyyUrN.js';
import '../typeof-CgC7Bq6K.js';
import '../toConsumableArray-dKQYsfpV.js';
import '../index-qSfOyGhk.js';
import 'react-dom';
import 'classnames';
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 '../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 '../portal/index.js';
import '../use-rerender-once/index.js';
import '../use-force-update/index.js';
import '../select-menu/autocomplete.js';
import '../button/button-group.js';
import '../popover/index.js';
import '../use-previous/index.js';
import './edit-filter.js';
import './filter-type-context.js';
import './use-key.js';

function useFocusHandle(ref) {
  var focusable = useRef();
  useImperativeHandle(ref, function () {
    return {
      focus: function focus() {
        focusable.current.focus();
      }
    };
  });
  return focusable;
} // Text between each filter, e.g. --- AND ---, --- OR ---


function Splitter(_ref) {
  var type = _ref.type;
  return /*#__PURE__*/React__default.createElement("div", {
    className: "text-center text-xs text-gray-300 my-1 flex items-center justify-center"
  }, /*#__PURE__*/React__default.createElement("span", {
    className: "block border-t border-gray-300 w-4"
  }), /*#__PURE__*/React__default.createElement("div", {
    className: "mx-2 uppercase"
  }, type == "collections/all" ? "and" : "or"), /*#__PURE__*/React__default.createElement("span", {
    className: "block border-t border-gray-300 w-4"
  }));
}

function TypeSelect(_ref2, ref) {
  var onChange = _ref2.onChange,
      value = _ref2.value;
  return /*#__PURE__*/React__default.createElement(SelectMenu, {
    ref: ref,
    name: "type",
    "aria-label": "match any, all, or none of the conditions in this filter group",
    onChange: onChange,
    value: value,
    options: [{
      value: "collections/any",
      label: "any"
    }, {
      value: "collections/all",
      label: "all"
    }, {
      value: "collections/none",
      label: "none"
    }]
  });
}

TypeSelect = /*#__PURE__*/forwardRef(TypeSelect);

function FilterGroup(_ref3, ref) {
  var children = _ref3.children,
      filters = _ref3.filters,
      type = _ref3.type,
      onRemove = _ref3.onRemove,
      index = _ref3.index,
      removable = _ref3.removable,
      onChangeType = _ref3.onChangeType,
      onAddFilter = _ref3.onAddFilter,
      onSaveFilter = _ref3.onSaveFilter,
      onRemoveFilter = _ref3.onRemoveFilter,
      _ref3$size = _ref3.size,
      size = _ref3$size === void 0 ? "" : _ref3$size;
  var isTabletScreen = useResponsiveValue([false, true], {
    breakpoints: ["xs"]
  });
  var typeSelect = useFocusHandle(ref);

  var handleTypeChange = function handleTypeChange(event) {
    onChangeType(index, event.target.value);
  };

  var handleAddFilter = function handleAddFilter(filter) {
    onAddFilter(index, filter);
  };

  var handleSaveFilter = function handleSaveFilter(filterIndex, filter) {
    onSaveFilter(index, filterIndex, filter);
  };

  var handleRemoveFilter = function handleRemoveFilter(filterIndex) {
    onRemoveFilter(index, filterIndex);
  };

  var gridStyle = size === "lg" && isTabletScreen ? {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, [col-start] minmax(200px, 1fr) 2rem [col-end])",
    gridGap: "1rem"
  } : {};
  return /*#__PURE__*/React__default.createElement("div", {
    className: "border border-gray-300 rounded"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "border-b border-gray-300 py-2 px-4 text-sm flex"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "flex-grow"
  }, "Matching", " ", /*#__PURE__*/React__default.createElement(TypeSelect, {
    value: type,
    ref: typeSelect,
    onChange: handleTypeChange
  }), " ", "of the following:"), removable && /*#__PURE__*/React__default.createElement(IconButton, {
    className: "border border-transparent rounded-sm focus:outline-blue text-gray-700 hover:text-gray-800",
    icon: "close",
    is: "secondary",
    onClick: function onClick() {
      return onRemove(index);
    },
    label: "remove group"
  })), /*#__PURE__*/React__default.createElement("div", {
    className: "p-4 bg-gray-50 relative rounded-b",
    style: gridStyle
  }, children, filters.map(function (filter, index) {
    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
      key: index
    }, /*#__PURE__*/React__default.createElement(Filter, {
      type: type,
      index: index,
      filter: filter,
      onSave: handleSaveFilter,
      onRemove: handleRemoveFilter
    }), /*#__PURE__*/React__default.createElement(Splitter, {
      type: type
    }));
  }), /*#__PURE__*/React__default.createElement(AddFilter, {
    onSave: handleAddFilter
  })));
}

FilterGroup = /*#__PURE__*/forwardRef(FilterGroup);
var FilterGroup$1 = FilterGroup;

export { FilterGroup$1 as default };
