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 Button from '../index.js';
import ButtonGroup from '../button-group.js';
import '../../defineProperty-CEd-kZQW.js';
import '../../extends-C4cduGrv.js';
import '../../objectWithoutProperties-TXwlfNxG.js';
import 'prop-types';
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 '../../slicedToArray-BB-AwwkK.js';
import '../../floating-ui.react-cWPyyUrN.js';
import '../../typeof-CgC7Bq6K.js';
import '../../toConsumableArray-dKQYsfpV.js';
import '../../index-qSfOyGhk.js';
import 'react-dom';

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("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 _render = render( /*#__PURE__*/React__default.createElement(ButtonGroup, null, /*#__PURE__*/React__default.createElement(Button, null, "One"), /*#__PURE__*/React__default.createElement(Button, null, "Two"))),
      rerender = _render.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");
});
