import { describe, expect, it } from "vitest"
import { mount } from "@vue/test-utils"
import ListOption from "./ListOption.vue"

describe("ListOption (props-based composition)", () => {
  it("mounts without error", () => {
    const wrapper = mount(ListOption, { props: { label: "Status" } })
    expect(wrapper.exists()).toBe(true)
  })

  it("renders the label via FieldFrame", () => {
    const wrapper = mount(ListOption, { props: { label: "Custom label" } })
    expect(wrapper.text()).toContain("Custom label")
  })

  it("hides the visible label when hideLabel is true", () => {
    const wrapper = mount(ListOption, {
      props: { label: "Hidden", hideLabel: true },
    })
    expect(wrapper.find("[data-testid='field-frame-label-sr']").exists()).toBe(
      true,
    )
  })

  it("renders option chips for each option", () => {
    const wrapper = mount(ListOption, {
      props: {
        label: "Status",
        options: [
          { label: "Open", value: "open" },
          { label: "Closed", value: "closed" },
        ],
      },
    })
    expect(wrapper.text()).toContain("Open")
    expect(wrapper.text()).toContain("Closed")
  })

  it("marks the matching chip as active", () => {
    const wrapper = mount(ListOption, {
      props: {
        label: "Status",
        modelValue: "open",
        options: [
          { label: "Open", value: "open" },
          { label: "Closed", value: "closed" },
        ],
      },
    })
    const chips = wrapper.findAll("[data-active]")
    expect(chips.some((c) => c.attributes("data-active") === "true")).toBe(
      true,
    )
  })

  it("emits update:modelValue on chip click", async () => {
    const wrapper = mount(ListOption, {
      props: {
        label: "Status",
        options: [
          { label: "Open", value: "open" },
          { label: "Closed", value: "closed" },
        ],
      },
    })
    await wrapper.findAll("[data-active]")[0]!.trigger("click")
    expect(wrapper.emitted("update:modelValue")).toBeTruthy()
  })

  it("renders errors when provided", () => {
    const wrapper = mount(ListOption, {
      props: { label: "X", errors: ["Required"] },
    })
    expect(wrapper.find("[data-testid='field-frame-errors']").exists()).toBe(
      true,
    )
  })

  it("works without any props at all", () => {
    const wrapper = mount(ListOption)
    expect(wrapper.exists()).toBe(true)
  })
})
