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

describe("IconPicker (props-based composition)", () => {
  describe("rendering", () => {
    it("renders the label and combobox input", () => {
      const wrapper = mount(IconPicker, { props: { label: "Icon" } })
      expect(wrapper.text()).toContain("Icon")
      expect(wrapper.find("input").exists()).toBe(true)
    })

    it("uses a custom placeholder when provided", () => {
      const wrapper = mount(IconPicker, {
        props: { label: "Icon", placeholder: "Pick an icon…" },
      })
      expect(wrapper.html()).toContain("Pick an icon…")
    })

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

    it("marks the label as required", () => {
      const wrapper = mount(IconPicker, {
        props: { label: "Icon", required: true },
      })
      expect(wrapper.html()).toContain("after:content-['*']")
    })
  })

  describe("value binding", () => {
    it("renders a preview icon when modelValue is a known lucide icon", () => {
      const wrapper = mount(IconPicker, {
        props: { label: "Icon", modelValue: "Calendar" },
      })
      expect(wrapper.find("[data-testid='icon-preview']").exists()).toBe(true)
    })

    it("does not render a preview when value is unknown", () => {
      const wrapper = mount(IconPicker, {
        props: { label: "Icon", modelValue: "ThisIconDoesNotExist" },
      })
      expect(wrapper.find("[data-testid='icon-preview']").exists()).toBe(false)
    })
  })

  describe("state matrix", () => {
    it("renders help text", () => {
      const wrapper = mount(IconPicker, {
        props: { label: "Icon", helpText: "Pick a lucide icon." },
      })
      expect(wrapper.text()).toContain("Pick a lucide icon.")
    })

    it("marks readonly via data attribute", () => {
      const wrapper = mount(IconPicker, {
        props: { label: "Icon", readonly: true },
      })
      expect(wrapper.html()).toContain("data-readonly")
    })
  })

  describe("errors", () => {
    it("renders errors from props", () => {
      const wrapper = mount(IconPicker, {
        props: { label: "Icon", errors: ["Required"] },
      })
      expect(wrapper.text()).toContain("Required")
    })
  })

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