import React__default from 'react';
import { cleanup, render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import userEvent from '@testing-library/user-event';
import ButtonGroup from '../button-group.js';
import { B as Button } from '../../index-4e01772f.js';
import '../../extends-e61fd370.js';
import '../../defineProperty-18999f8e.js';
import '../../slicedToArray-5b664d46.js';
import '../../objectWithoutProperties-72d23964.js';
import 'prop-types';
import 'classnames';
import '../../typeof-6c6d8d7a.js';
import '../../toConsumableArray-f2f53597.js';
import '../../index-81a9bdac.js';
import 'react-dom';
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-2b54f757.js';
import '../../utils.esm-514fad91.js';
import '../../warning-ed2bf294.js';
import '../../portal.esm-613949dc.js';
import '@reach/visually-hidden';
import '../../portal/index.js';
import '../../use-rerender-once/index.js';
import '../../use-force-update/index.js';

afterEach(cleanup);
describe("ButtonGroup", function () {
  it("defaults `spacing` to 1", function () {
    render( /*#__PURE__*/React__default.createElement(ButtonGroup, null, /*#__PURE__*/React__default.createElement(Button, null, "One"), /*#__PURE__*/React__default.createElement(Button, null, "Two")));
    var group = screen.getByRole("group");
    expect(group.classList).toContain("gap-1");
  });
  it("can set spacing via prop", function () {
    render( /*#__PURE__*/React__default.createElement(ButtonGroup, {
      spacing: 4
    }, /*#__PURE__*/React__default.createElement(Button, null, "One"), /*#__PURE__*/React__default.createElement(Button, null, "Two")));
    var group = screen.getByRole("group");
    expect(group.classList).toContain("gap-4");
  });
  it("doesnt override existing classes", function () {
    render( /*#__PURE__*/React__default.createElement(ButtonGroup, null, /*#__PURE__*/React__default.createElement(Button, null, "One"), /*#__PURE__*/React__default.createElement(Button, {
      className: "button-two"
    }, "Two")));
    var two = screen.getByRole("button", {
      name: "Two"
    });
    expect(two.classList).toContain("button-two");
  });
  it("can only have one active button", function () {
    render( /*#__PURE__*/React__default.createElement(ButtonGroup, null, /*#__PURE__*/React__default.createElement(Button, {
      active: true
    }, "One"), /*#__PURE__*/React__default.createElement(Button, null, "Two"), /*#__PURE__*/React__default.createElement(Button, {
      active: true
    }, "Three")));
    var buttons = screen.getAllByRole("button", {
      pressed: true
    });
    expect(buttons).toHaveLength(1); // The last active button should be the one that is active because it is rendered last

    expect(buttons[0]).toHaveTextContent("Three");
  });
  it("keeps track of active button on re-render", function () {
    var _render = render( /*#__PURE__*/React__default.createElement(ButtonGroup, null, /*#__PURE__*/React__default.createElement(Button, null, "One"), /*#__PURE__*/React__default.createElement(Button, null, "Two"), /*#__PURE__*/React__default.createElement(Button, {
      active: undefined
    }, "Three"))),
        rerender = _render.rerender;

    var buttons = screen.queryAllByRole("button", {
      pressed: true
    });
    expect(buttons).toHaveLength(0);
    rerender( /*#__PURE__*/React__default.createElement(ButtonGroup, null, /*#__PURE__*/React__default.createElement(Button, null, "One"), /*#__PURE__*/React__default.createElement(Button, null, "Two"), /*#__PURE__*/React__default.createElement(Button, {
      active: true
    }, "Three")));
    buttons = screen.queryAllByRole("button", {
      pressed: true
    });
    expect(buttons).toHaveLength(1);
  });
  it("switches active button when different button is clicked", function () {
    render( /*#__PURE__*/React__default.createElement(ButtonGroup, null, /*#__PURE__*/React__default.createElement(Button, null, "One"), /*#__PURE__*/React__default.createElement(Button, {
      active: true
    }, "Two"), /*#__PURE__*/React__default.createElement(Button, null, "Three")));
    var activeButton = screen.getByRole("button", {
      pressed: true
    });
    expect(activeButton).toHaveTextContent("Two");
    var buttonOne = screen.getByRole("button", {
      name: "One"
    });
    userEvent.click(buttonOne);
    activeButton = screen.getByRole("button", {
      pressed: true
    });
    expect(activeButton).toHaveTextContent("One");
  });
  it("sets active state without an initial active button", function () {
    render( /*#__PURE__*/React__default.createElement(ButtonGroup, null, /*#__PURE__*/React__default.createElement(Button, null, "One"), /*#__PURE__*/React__default.createElement(Button, null, "Two"), /*#__PURE__*/React__default.createElement(Button, null, "Three")));
    var buttons = screen.queryAllByRole("button", {
      pressed: true
    });
    expect(buttons).toHaveLength(0);
    var buttonOne = screen.getByRole("button", {
      name: "One"
    });
    userEvent.click(buttonOne);
    var activeButton = screen.getByRole("button", {
      pressed: true
    });
    expect(activeButton).toHaveTextContent("One");
  });
  it("can be vertical", function () {
    render( /*#__PURE__*/React__default.createElement(ButtonGroup, {
      orientation: "vertical"
    }, /*#__PURE__*/React__default.createElement(Button, null, "One"), /*#__PURE__*/React__default.createElement(Button, null, "Two")));
    var group = screen.getByRole("group");
    expect(group.classList).toContain("grid-flow-row");
  });
  it("controls the size", function () {
    render( /*#__PURE__*/React__default.createElement(ButtonGroup, {
      size: "md"
    }, /*#__PURE__*/React__default.createElement(Button, null, "One"), /*#__PURE__*/React__default.createElement(Button, null, "Two")));
    var group = screen.getByRole("group"); // 40px is the medium height

    expect(group.classList).toContain("h-10");
  });
});
it("sizes all buttons in the group equally", function () {
  var _render2 = render( /*#__PURE__*/React__default.createElement(ButtonGroup, null, /*#__PURE__*/React__default.createElement(Button, null, "One"), /*#__PURE__*/React__default.createElement(Button, null, "Two"))),
      rerender = _render2.rerender;

  var group = screen.getByRole("group");
  expect(group.classList).toContain("auto-cols-fr");
  rerender( /*#__PURE__*/React__default.createElement(ButtonGroup, {
    orientation: "vertical"
  }, /*#__PURE__*/React__default.createElement(Button, null, "One"), /*#__PURE__*/React__default.createElement(Button, null, "Two")));
  group = screen.getByRole("group");
  expect(group.classList).toContain("auto-rows-fr");
});
