import { _ as _extends } from '../extends-C4cduGrv.js';
import { _ as _defineProperty } from '../defineProperty-CEd-kZQW.js';
import { _ as _toConsumableArray } from '../toConsumableArray-dKQYsfpV.js';
import { _ as _slicedToArray } from '../slicedToArray-BB-AwwkK.js';
import React__default, { useRef, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import Button from '../button/index.js';
import FilterGroup from './filter-group.js';
import FilterTypeContext from './filter-type-context.js';
import '../objectWithoutProperties-TXwlfNxG.js';
import '@reach/visually-hidden';
import '../ck-icon/index.js';
import 'classnames';
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 '../index-qSfOyGhk.js';
import 'react-dom';
import '../button/button-group.js';
import '../select-menu/index.js';
import '../select-menu-BvA3x4Nf.js';
import '../_commonjsHelpers-_1FafXWI.js';
import '../label/index.js';
import '../portal/index.js';
import '../use-rerender-once/index.js';
import '../use-force-update/index.js';
import '../select-menu/autocomplete.js';
import './add-filter.js';
import '../popover/index.js';
import '../use-previous/index.js';
import './edit-filter.js';
import './use-key.js';
import './filter.js';
import '../use-responsive-value/index.js';

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var initialState = [{
  type: "collections/all",
  filters: []
}];

function useFocus() {
  var ref = useRef();

  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      focusKey = _useState2[0],
      setFocusKey = _useState2[1];

  useEffect(function () {
    if (focusKey) ref.current.focus();
  }, [focusKey]);

  var focus = function focus() {
    setFocusKey({});
  };

  return [ref, focus];
}

function Splitter() {
  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"
  }, "and"), /*#__PURE__*/React__default.createElement("span", {
    className: "block border-t border-gray-300 w-4"
  }));
}

function Filter(_ref) {
  var className = _ref.className,
      _ref$types = _ref.types,
      types = _ref$types === void 0 ? [] : _ref$types,
      _ref$filters = _ref.filters,
      filters = _ref$filters === void 0 ? initialState : _ref$filters,
      onChange = _ref.onChange,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? "" : _ref$size;

  var _useFocus = useFocus(),
      _useFocus2 = _slicedToArray(_useFocus, 2),
      lastGroup = _useFocus2[0],
      focusLastGroup = _useFocus2[1]; // If an empty array is passed as the `filters` prop, we still display one
  // group so the user doesn't have to click "Add Filter Group", and then
  // "Add Filter".


  var groups = filters.length > 0 ? filters : initialState;

  var addGroup = function addGroup() {
    onChange([].concat(_toConsumableArray(groups), [{
      type: "collections/any",
      filters: []
    }]));
    focusLastGroup();
  };

  var removeGroup = function removeGroup(groupIndex) {
    onChange(groups.filter(function (group, i) {
      return i !== groupIndex;
    }));
  };

  var updateGroup = function updateGroup(groupIndex, attrs) {
    var newGroups = groups.map(function (group, index) {
      if (index !== groupIndex) return group;
      return _objectSpread(_objectSpread({}, group), attrs);
    });
    onChange(newGroups);
  };

  var changeGroupType = function changeGroupType(groupIndex, type) {
    updateGroup(groupIndex, {
      type: type
    });
  };

  var addFilter = function addFilter(groupIndex, filter) {
    var newFilters = [].concat(_toConsumableArray(groups[groupIndex].filters), [filter]);
    updateGroup(groupIndex, {
      filters: newFilters
    });
  };

  var saveFilter = function saveFilter(groupIndex, filterIndex, updatedFilter) {
    var newFilters = groups[groupIndex].filters.map(function (filter, index) {
      if (index !== filterIndex) return filter;
      return updatedFilter;
    });
    updateGroup(groupIndex, {
      filters: newFilters
    });
  };

  var removeFilter = function removeFilter(groupIndex, filterIndex) {
    var newFilters = groups[groupIndex].filters.filter(function (filter, index) {
      return index !== filterIndex;
    });
    updateGroup(groupIndex, {
      filters: newFilters
    });
  };

  return /*#__PURE__*/React__default.createElement(FilterTypeContext.Provider, {
    value: types
  }, /*#__PURE__*/React__default.createElement("div", {
    className: className
  }, groups.map(function (group, index) {
    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
      key: index
    }, groups.length > 1 && index > 0 && /*#__PURE__*/React__default.createElement(Splitter, null), /*#__PURE__*/React__default.createElement(FilterGroup, _extends({
      removable: groups.length > 1,
      onChangeType: changeGroupType,
      onRemove: function onRemove() {
        return removeGroup(index);
      },
      onAddFilter: addFilter,
      onSaveFilter: saveFilter,
      onRemoveFilter: removeFilter,
      index: index,
      ref: lastGroup,
      size: size
    }, group)));
  }), /*#__PURE__*/React__default.createElement(Button, {
    className: "mt-4 w-full",
    is: "secondary",
    size: "lg",
    onClick: addGroup,
    type: "button"
  }, "Add Filter Group")));
}

Filter.propTypes = {
  className: PropTypes.string,
  types: PropTypes.array,
  filters: PropTypes.array,
  onChange: PropTypes.func,
  size: PropTypes.string
};

export { Filter as default };
