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

describe("ColorPicker (props-based composition)", () => {
  describe("rendering", () => {
    it("renders the label and a hex input", () => {
      const wrapper = mount(ColorPicker, { props: { label: "Brand color" } })
      expect(wrapper.text()).toContain("Brand color")
      expect(wrapper.find("[data-testid='color-hex-input']").exists()).toBe(
        true,
      )
    })

    it("renders swatches when provided", () => {
      const wrapper = mount(ColorPicker, {
        props: { label: "Brand color", swatches: ["#ff0000", "#00ff00"] },
      })
      // Swatches live inside the popover content (rendered eagerly by reka-ui).
      expect(wrapper.html()).toContain("color-swatch")
    })

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

  describe("value binding", () => {
    it("renders the modelValue into the hex input", () => {
      const wrapper = mount(ColorPicker, {
        props: { label: "Brand color", modelValue: "#abcdef" },
      })
      const input = wrapper.find(
        "[data-testid='color-hex-input']",
      ).element as HTMLInputElement
      expect(input.value).toBe("#abcdef")
    })

    it("emits update:modelValue when the user types hex", async () => {
      const wrapper = mount(ColorPicker, { props: { label: "Brand color" } })
      await wrapper.find("[data-testid='color-hex-input']").setValue("#ff8800")
      const emitted = wrapper.emitted("update:modelValue")
      expect(emitted).toBeTruthy()
      expect(emitted![emitted!.length - 1]).toEqual(["#ff8800"])
    })
  })

  describe("state matrix", () => {
    it("disables the swatch trigger when disabled", () => {
      const wrapper = mount(ColorPicker, {
        props: { label: "Brand color", disabled: true },
      })
      expect(
        wrapper
          .find("[data-testid='color-swatch-trigger']")
          .attributes("disabled"),
      ).toBeDefined()
    })

    it("marks the input as readonly", () => {
      const wrapper = mount(ColorPicker, {
        props: { label: "Brand color", readonly: true },
      })
      const input = wrapper.find(
        "[data-testid='color-hex-input']",
      ).element as HTMLInputElement
      expect(input.readOnly).toBe(true)
    })

    it("renders help text", () => {
      const wrapper = mount(ColorPicker, {
        props: { label: "Brand color", helpText: "Use full-width hex." },
      })
      expect(wrapper.text()).toContain("Use full-width hex.")
    })
  })

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

  it("works without any props at all", () => {
    const wrapper = mount(ColorPicker)
    expect(wrapper.find("[data-testid='color-hex-input']").exists()).toBe(true)
  })
})
