import React from "react"
import { render, screen, cleanup } from "@testing-library/react"
import "@testing-library/jest-dom/extend-expect"
import userEvent from "@testing-library/user-event"
import Button from "../"
import ButtonGroup from "../button-group"

afterEach(cleanup)
describe("ButtonGroup", () => {
  it("defaults `spacing` to 1", () => {
    render(
      <ButtonGroup>
        <Button>One</Button>
        <Button>Two</Button>
      </ButtonGroup>
    )

    const group = screen.getByRole("group")

    expect(group.classList).toContain("gap-1")
  })

  it("can set spacing via prop", () => {
    render(
      <ButtonGroup spacing={4}>
        <Button>One</Button>
        <Button>Two</Button>
      </ButtonGroup>
    )

    const group = screen.getByRole("group")

    expect(group.classList).toContain("gap-4")
  })

  it("doesnt override existing classes", () => {
    render(
      <ButtonGroup>
        <Button>One</Button>
        <Button className="button-two">Two</Button>
      </ButtonGroup>
    )

    const two = screen.getByRole("button", { name: "Two" })

    expect(two.classList).toContain("button-two")
  })

  it("can only have one active button", () => {
    render(
      <ButtonGroup>
        <Button active>One</Button>
        <Button>Two</Button>
        <Button active>Three</Button>
      </ButtonGroup>
    )

    const 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", () => {
    render(
      <ButtonGroup>
        <Button>One</Button>
        <Button active>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
    )

    let activeButton = screen.getByRole("button", { pressed: true })

    expect(activeButton).toHaveTextContent("Two")

    const 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", () => {
    render(
      <ButtonGroup>
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
    )

    const buttons = screen.queryAllByRole("button", { pressed: true })

    expect(buttons).toHaveLength(0)

    const buttonOne = screen.getByRole("button", { name: "One" })

    userEvent.click(buttonOne)

    const activeButton = screen.getByRole("button", { pressed: true })

    expect(activeButton).toHaveTextContent("One")
  })

  it("can be vertical", () => {
    render(
      <ButtonGroup orientation="vertical">
        <Button>One</Button>
        <Button>Two</Button>
      </ButtonGroup>
    )

    const group = screen.getByRole("group")

    expect(group.classList).toContain("grid-flow-row")
  })

  it("controls the size", () => {
    render(
      <ButtonGroup size="md">
        <Button>One</Button>
        <Button>Two</Button>
      </ButtonGroup>
    )

    const group = screen.getByRole("group")

    // 40px is the medium height
    expect(group.classList).toContain("h-10")
  })
})

  it("sizes all buttons in the group equally", () => {
    const { rerender } = render(
      <ButtonGroup>
        <Button>One</Button>
        <Button>Two</Button>
      </ButtonGroup>
    )

    let group = screen.getByRole("group")

    expect(group.classList).toContain("auto-cols-fr")

    rerender(
      <ButtonGroup orientation="vertical">
        <Button>One</Button>
        <Button>Two</Button>
      </ButtonGroup>
    )

    group = screen.getByRole("group")

    expect(group.classList).toContain("auto-rows-fr")
  })
