import React from "react"
import { render, cleanup, screen } from "@testing-library/react"
import "@testing-library/jest-dom/extend-expect"
import Button from "../"

const DISABLED_CLASSES = "text-gray-600 bg-gray-200"

afterEach(cleanup)

describe("Button", () => {
  it("renders", () => {
    render(<Button>Deactivate Atrocity</Button>)

    expect(screen.getByRole("button")).toBeInTheDocument()
  })

  it("has cursor-pointer when not disabled", () => {
    const jsx = (
      <div>
        <Button>Deactivate Atrocity</Button>
        <Button is="primary">Activate Generosity</Button>
        <Button disabled={false}>Subscribe to The Thread™</Button>
      </div>
    )
    render(jsx)

    const buttons = screen.getAllByRole("button")

    buttons.forEach((button) => {
      expect(button).toHaveClass("cursor-pointer")
    })
  })

  it("has cursor-default when disabled", () => {
    const jsx = (
      <div>
        <Button disabled>Deactivate Atrocity</Button>
        <Button is="primary" disabled>Activate Generosity</Button>
        <Button disabled={true}>Subscribe to The Thread™</Button>
      </div>
    )
    render(jsx)

    const buttons = screen.getAllByRole("button")

    buttons.forEach((button) => {
      expect(button).toHaveClass("cursor-default")
    })
  })

  it("applies disabled styles when `is` is set", () => {
    render(<Button is="primary" disabled>Click me</Button>)

    const button = screen.getByRole("button")
    expect(button).toHaveClass(DISABLED_CLASSES)
  })

  it("applies disabled styles when `color` is set", () => {
    render(<Button color="red" disabled>Click me</Button>)

    const button = screen.getByRole("button")
    expect(button).toHaveClass(DISABLED_CLASSES)
  })

  it("does not apply disabled styles when `is` or `color` is not set", () => {
    render(<Button disabled>Click me</Button>)

    const button = screen.getByRole("button")
    expect(button).not.toHaveClass(DISABLED_CLASSES)
  })

  it("does not set undefined classes", () => {
    const jsx = (
      <div>
        <Button>Deactivate Atrocity</Button>
        <Button is="primary">Activate Generosity</Button>
        <Button color="red">Subscribe to The Thread™</Button>
        <Button disabled>Unsubscribe from The Thread™</Button>
      </div>
    )

    render(jsx)

    const buttons = screen.getAllByRole("button")

    buttons.forEach((button) => {
      expect(button).not.toHaveClass("undefined")
    })
  })
})
