/* eslint-disable formatjs/no-literal-string-in-jsx */
import { describe, expect, it, vi, afterEach } from "vitest"
import { render, screen, cleanup, fireEvent } from "@testing-library/react"
import userEvent from "@testing-library/user-event"

import { ChipButton } from "./ChipButton"

afterEach(() => {
  cleanup()
})

describe("ChipButton", () => {
  describe("rendering", () => {
    it("renders as a button element", () => {
      render(<ChipButton>Click me</ChipButton>)
      const button = screen.getByRole("button", { name: "Click me" })
      expect(button).toBeTruthy()
      expect(button.tagName).toBe("BUTTON")
    })

    it("renders children content", () => {
      render(<ChipButton>Button Content</ChipButton>)
      expect(screen.getByText("Button Content")).toBeTruthy()
    })

    it("renders with multiple children", () => {
      render(
        <ChipButton>
          <span>Icon</span>
          Label
        </ChipButton>
      )
      expect(screen.getByText("Icon")).toBeTruthy()
      expect(screen.getByText("Label")).toBeTruthy()
    })
  })

  describe("variants", () => {
    it("renders Default variant", () => {
      render(<ChipButton variant="Default">Default</ChipButton>)
      expect(screen.getByRole("button", { name: "Default" })).toBeTruthy()
    })

    it("renders Outlined variant", () => {
      render(<ChipButton variant="Outlined">Outlined</ChipButton>)
      expect(screen.getByRole("button", { name: "Outlined" })).toBeTruthy()
    })

    it("renders FilterRounded variant", () => {
      render(<ChipButton variant="FilterRounded">Filter</ChipButton>)
      expect(screen.getByRole("button", { name: "Filter" })).toBeTruthy()
    })
  })

  describe("selected state", () => {
    it("renders with selected=false by default", () => {
      render(<ChipButton>Not Selected</ChipButton>)
      expect(screen.getByRole("button", { name: "Not Selected" })).toBeTruthy()
    })

    it("renders with selected=true", () => {
      render(<ChipButton selected>Selected</ChipButton>)
      expect(screen.getByRole("button", { name: "Selected" })).toBeTruthy()
    })
  })

  describe("sizes", () => {
    it("renders Medium size", () => {
      render(<ChipButton size="Medium">Medium</ChipButton>)
      expect(screen.getByRole("button", { name: "Medium" })).toBeTruthy()
    })

    it("renders Large size (default)", () => {
      render(<ChipButton size="Large">Large</ChipButton>)
      expect(screen.getByRole("button", { name: "Large" })).toBeTruthy()
    })
  })

  describe("props", () => {
    it("applies custom className", () => {
      render(<ChipButton className="custom-class">Button</ChipButton>)
      const button = screen.getByRole("button", { name: "Button" })
      expect(button.className).toContain("custom-class")
    })

    it("can be disabled", () => {
      render(<ChipButton isDisabled>Disabled</ChipButton>)
      const button = screen.getByRole("button", { name: "Disabled" })
      expect(button).toHaveProperty("disabled", true)
    })
  })

  describe("interactions", () => {
    it("calls onPress when clicked", () => {
      const onPress = vi.fn()
      render(<ChipButton onPress={onPress}>Click me</ChipButton>)

      // React Aria Components Button uses onPress which listens to click events
      fireEvent.click(screen.getByRole("button", { name: "Click me" }))
      expect(onPress).toHaveBeenCalledTimes(1)
    })

    it("does not call onPress when disabled", () => {
      const onPress = vi.fn()
      render(
        <ChipButton isDisabled onPress={onPress}>
          Disabled
        </ChipButton>
      )

      fireEvent.click(screen.getByRole("button", { name: "Disabled" }))
      expect(onPress).not.toHaveBeenCalled()
    })
  })

  describe("keyboard navigation", () => {
    it("is focusable via keyboard", async () => {
      const user = userEvent.setup()
      render(<ChipButton>Focusable</ChipButton>)

      const button = screen.getByRole("button", { name: "Focusable" })
      await user.tab()
      expect(document.activeElement).toBe(button)
    })

    it("can be activated with Enter key", async () => {
      const onPress = vi.fn()
      const user = userEvent.setup()
      render(<ChipButton onPress={onPress}>Press Enter</ChipButton>)

      screen.getByRole("button", { name: "Press Enter" })
      await user.tab()
      await user.keyboard("{Enter}")
      expect(onPress).toHaveBeenCalledTimes(1)
    })

    it("can be activated with Space key", async () => {
      const onPress = vi.fn()
      const user = userEvent.setup()
      render(<ChipButton onPress={onPress}>Press Space</ChipButton>)

      screen.getByRole("button", { name: "Press Space" })
      await user.tab()
      await user.keyboard(" ")
      expect(onPress).toHaveBeenCalledTimes(1)
    })
  })
})