// @vitest-environment jsdom

import { cleanup, fireEvent, render, screen } from "@testing-library/react"
import { afterEach, describe, expect, it } from "vitest"

import {
  ActionGroup,
  Bold,
  Date,
  LexicalActions,
  LexicalBubbleToolbar,
  LexicalContent,
  LexicalFixedToolbar,
  LexicalFooter,
  LexicalRoot,
} from "."

afterEach(cleanup)

describe("declarative Lexical actions", () => {
  it("renders actions only in their declared regions", () => {
    render(
      <LexicalRoot value="" onChange={() => undefined}>
        <LexicalActions>
          <Bold in={["toolbar", "bubble"]} />
          <Date in="footer" />
        </LexicalActions>
        <LexicalFixedToolbar aria-label="fixed" />
        <LexicalBubbleToolbar />
        <LexicalContent />
        <LexicalFooter aria-label="footer" />
      </LexicalRoot>
    )

    expect(screen.getByRole("toolbar", { name: "fixed" })).not.toBeNull()
    expect(screen.getByLabelText("footer")).not.toBeNull()
    expect(screen.getByRole("button", { name: "Bold" })).not.toBeNull()
    expect(screen.getByRole("button", { name: "Date" })).not.toBeNull()
  })

  it("supports menu groups", () => {
    render(
      <LexicalRoot value="" onChange={() => undefined}>
        <LexicalActions>
          <ActionGroup type="menu" label="格式">
            <Bold />
          </ActionGroup>
        </LexicalActions>
        <LexicalFixedToolbar />
        <LexicalContent />
      </LexicalRoot>
    )

    expect(screen.getByRole("button", { name: "格式" })).not.toBeNull()
  })

  it("forwards an action className to its default control", () => {
    render(
      <LexicalRoot value="" onChange={() => undefined}>
        <LexicalActions>
          <Bold className="text-destructive" />
        </LexicalActions>
        <LexicalFixedToolbar />
        <LexicalContent />
      </LexicalRoot>
    )

    expect(
      screen
        .getByRole("button", { name: "Bold" })
        .classList.contains("text-destructive")
    ).toBe(true)
  })

  it("forwards an action className to its default menu item", async () => {
    render(
      <LexicalRoot value="" onChange={() => undefined}>
        <LexicalActions>
          <ActionGroup type="menu" label="格式">
            <Bold className="text-destructive" />
          </ActionGroup>
        </LexicalActions>
        <LexicalFixedToolbar />
        <LexicalContent />
      </LexicalRoot>
    )

    fireEvent.click(screen.getByRole("button", { name: "格式" }))

    expect(
      (
        await screen.findByRole("menuitem", { name: "Bold" })
      ).classList.contains("text-destructive")
    ).toBe(true)
  })

  it("does not render optional regions without matching actions", () => {
    render(
      <LexicalRoot value="" onChange={() => undefined}>
        <LexicalActions>
          <Bold />
        </LexicalActions>
        <LexicalBubbleToolbar aria-label="bubble" />
        <LexicalFooter aria-label="footer" />
        <LexicalContent />
      </LexicalRoot>
    )

    expect(screen.queryByLabelText("bubble")).toBeNull()
    expect(screen.queryByLabelText("footer")).toBeNull()
  })
})