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

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

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

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

  it("renders chips for selected values", () => {
    const wrapper = mount(SelectMultipleOption, {
      props: {
        label: "Tags",
        options: [
          { label: "Apple", value: "apple" },
          { label: "Banana", value: "banana" },
        ],
        modelValue: ["apple", "banana"],
      },
    })
    expect(wrapper.text()).toContain("Apple")
    expect(wrapper.text()).toContain("Banana")
  })

  it("renders help text", () => {
    const wrapper = mount(SelectMultipleOption, {
      props: { label: "X", helpText: "Pick a few" },
    })
    expect(wrapper.find("[data-testid='field-frame-help']").text()).toBe(
      "Pick a few",
    )
  })

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

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