import { _ as _slicedToArray } from '../../slicedToArray-BB-AwwkK.js';
import { _ as _asyncToGenerator, r as regenerator } from '../../index-qSfOyGhk.js';
import React__default from 'react';
import { screen, render, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MultiSelectFilter from '../filter.js';
import '../../typeof-CgC7Bq6K.js';
import '../../defineProperty-CEd-kZQW.js';
import '../../extends-C4cduGrv.js';
import '../../toConsumableArray-dKQYsfpV.js';
import '../../objectWithoutProperties-TXwlfNxG.js';
import '../../index-CMfVNfTW.js';
import 'react-dom';
import 'prop-types';
import 'classnames';
import '../../icon/assets/icon-map/index.js';
import '../../social-icon/index.js';
import '@fortawesome/react-fontawesome';
import '../../social-icon/icons.js';
import '../../social-icon/library.js';
import '@fortawesome/fontawesome-svg-core';
import '@fortawesome/free-solid-svg-icons';
import '@fortawesome/free-brands-svg-icons';
import '../../tooltip/index.js';
import '../../auto-id.esm-CjaDlg7r.js';
import '../../utils.esm-BKUEBdyY.js';
import '../../warning-s9zGJbnw.js';
import '../../portal.esm-D9LQ40g_.js';
import '@reach/visually-hidden';
import '../../portal/index.js';
import '../../use-rerender-once/index.js';
import '../../use-force-update/index.js';
import '../../button/button-group.js';
import '../../inject-css-BqVV5N0s.js';
import '../../select-menu-CMlOgi2H.js';
import '../../_commonjsHelpers-_1FafXWI.js';
import '../../label/index.js';
import '../input.js';
import '../../checkbox/index.js';

describe("MultiselectFilter", function () {
  var options = [{
    label: "Walleye",
    value: "walleye"
  }, {
    label: "Bass",
    value: "bass"
  }, {
    label: "Perch",
    value: "perch"
  }];
  it("applies aria-label to the reference when passed", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
    var trigger, listbox;
    return regenerator.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            render( /*#__PURE__*/React__default.createElement(MultiSelectFilter, {
              "aria-label": "Select an option",
              options: [{
                label: "Option 1",
                value: "option1"
              }, {
                label: "Option 2",
                value: "option2"
              }, {
                label: "Option 3",
                value: "option3"
              }]
            }));
            trigger = screen.getByRole("combobox");
            _context.next = 4;
            return act(function () {
              return userEvent.click(trigger);
            });

          case 4:
            listbox = screen.getByRole("listbox");
            expect(trigger).toHaveAttribute("aria-label", "Select an option");
            expect(listbox).not.toHaveAttribute("aria-label", "Select an option");

          case 7:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  })));
  it("applies aria-labelledby to the reference when passed", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
    var trigger, listbox;
    return regenerator.wrap(function _callee2$(_context2) {
      while (1) {
        switch (_context2.prev = _context2.next) {
          case 0:
            render( /*#__PURE__*/React__default.createElement(MultiSelectFilter, {
              "aria-labelledby": "my-external-id",
              options: [{
                label: "Option 1",
                value: "option1"
              }, {
                label: "Option 2",
                value: "option2"
              }, {
                label: "Option 3",
                value: "option3"
              }]
            }));
            trigger = screen.getByRole("combobox");
            _context2.next = 4;
            return act(function () {
              return userEvent.click(trigger);
            });

          case 4:
            listbox = screen.getByRole("listbox");
            expect(trigger).toHaveAttribute("aria-labelledby", "my-external-id");
            expect(listbox).not.toHaveAttribute("aria-labelledby", "my-external-id");

          case 7:
          case "end":
            return _context2.stop();
        }
      }
    }, _callee2);
  })));
  it("passes the selected options to the onChange callback", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee3() {
    var handleChange, combobox, listOptions;
    return regenerator.wrap(function _callee3$(_context3) {
      while (1) {
        switch (_context3.prev = _context3.next) {
          case 0:
            handleChange = jest.fn();
            render( /*#__PURE__*/React__default.createElement(MultiSelectFilter, {
              options: options,
              onChange: handleChange
            }));
            combobox = screen.getByRole("combobox");
            _context3.next = 5;
            return act(function () {
              return userEvent.click(combobox);
            });

          case 5:
            listOptions = screen.getAllByRole("option");
            _context3.next = 8;
            return act(function () {
              return userEvent.click(listOptions[1]);
            });

          case 8:
            _context3.next = 10;
            return act(function () {
              return userEvent.click(listOptions[2]);
            });

          case 10:
            expect(handleChange).toHaveBeenCalledWith({
              target: {
                name: undefined,
                value: [options[1], options[2]]
              }
            });

          case 11:
          case "end":
            return _context3.stop();
        }
      }
    }, _callee3);
  })));
  it("shows an indicator when the filter is active", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee4() {
    var combobox, indicator, listOptions;
    return regenerator.wrap(function _callee4$(_context4) {
      while (1) {
        switch (_context4.prev = _context4.next) {
          case 0:
            render( /*#__PURE__*/React__default.createElement(MultiSelectFilter, {
              options: options
            }));
            combobox = screen.getByRole("combobox");
            _context4.next = 4;
            return act(function () {
              return userEvent.click(combobox);
            });

          case 4:
            indicator = screen.getByRole("status");
            expect(indicator).toBeInTheDocument();
            expect(indicator).toHaveAccessibleName("0 filters active");
            listOptions = screen.getAllByRole("option");
            _context4.next = 10;
            return act(function () {
              return userEvent.click(listOptions[1]);
            });

          case 10:
            expect(indicator).toHaveAccessibleName("1 filter active");
            _context4.next = 13;
            return act(function () {
              return userEvent.click(listOptions[0]);
            });

          case 13:
            expect(indicator).toHaveAccessibleName("2 filters active");

          case 14:
          case "end":
            return _context4.stop();
        }
      }
    }, _callee4);
  })));
  it("does not allow interaction with the filter when disabled", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee5() {
    var combobox, listOptions;
    return regenerator.wrap(function _callee5$(_context5) {
      while (1) {
        switch (_context5.prev = _context5.next) {
          case 0:
            render( /*#__PURE__*/React__default.createElement(MultiSelectFilter, {
              options: options,
              disabled: true
            }));
            combobox = screen.getByRole("combobox");
            expect(combobox).toHaveAttribute("aria-disabled", "true");
            _context5.next = 5;
            return act(function () {
              return userEvent.click(combobox);
            });

          case 5:
            listOptions = screen.queryAllByRole("option");
            expect(listOptions).toHaveLength(0);

          case 7:
          case "end":
            return _context5.stop();
        }
      }
    }, _callee5);
  })));
  it("clears selection when value prop changes", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee6() {
    var clearButton, combobox, listOptions, selectedOptions;
    return regenerator.wrap(function _callee6$(_context6) {
      while (1) {
        switch (_context6.prev = _context6.next) {
          case 0:
            render( /*#__PURE__*/React__default.createElement(ClearableFilter, null));
            clearButton = screen.getByTestId("clear-btn");
            combobox = screen.getByRole("combobox");
            _context6.next = 5;
            return act(function () {
              return userEvent.click(combobox);
            });

          case 5:
            listOptions = screen.getAllByRole("option");
            expect(listOptions).toHaveLength(4);
            selectedOptions = screen.getAllByRole("option", {
              selected: true
            });
            expect(selectedOptions).toHaveLength(2);
            _context6.next = 11;
            return act(function () {
              return userEvent.click(clearButton);
            });

          case 11:
            _context6.next = 13;
            return act(function () {
              return userEvent.click(combobox);
            });

          case 13:
            listOptions = screen.getAllByRole("option");
            selectedOptions = screen.queryAllByRole("option", {
              selected: true
            });
            expect(listOptions).toHaveLength(4);
            expect(selectedOptions).toHaveLength(0);

          case 17:
          case "end":
            return _context6.stop();
        }
      }
    }, _callee6);
  })));
});

function ClearableFilter() {
  var options = [{
    label: "Walleye",
    value: "walleye"
  }, {
    label: "Bass",
    value: "bass"
  }, {
    label: "Perch",
    value: "perch"
  }, {
    label: "Pike",
    value: "pike"
  }];

  var _React$useState = React__default.useState(["bass", "pike"]),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      value = _React$useState2[0],
      setValue = _React$useState2[1];

  var handleClick = function handleClick() {
    setValue([]);
  };

  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(MultiSelectFilter, {
    options: options,
    value: value
  }), /*#__PURE__*/React__default.createElement("button", {
    "data-testid": "clear-btn",
    onClick: handleClick
  }, "Clear values"));
}
