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

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

    it("uses the placeholder", () => {
      const wrapper = mount(DataModelPicker, {
        props: { label: "Field", placeholder: "user.email" },
      })
      expect(wrapper.find("input").attributes("placeholder")).toBe("user.email")
    })

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

    it("accepts a list of dataModelKeys as a prop", () => {
      const wrapper = mount(DataModelPicker, {
        props: {
          label: "Field",
          dataModelKeys: ["first_name", "last_name"],
        },
      })
      // Items render inside the Combobox popover content. We just verify
      // the prop is applied and the surface mounts; visual coverage of
      // the item list lives in Storybook.
      expect(wrapper.props("dataModelKeys")).toEqual([
        "first_name",
        "last_name",
      ])
      expect(wrapper.find("input").exists()).toBe(true)
    })
  })

  describe("value binding", () => {
    it("accepts modelValue as initial selection", () => {
      const wrapper = mount(DataModelPicker, {
        props: { label: "Field", modelValue: "starts_at" },
      })
      expect(wrapper.exists()).toBe(true)
    })
  })

  describe("state matrix", () => {
    it("disables the input", () => {
      const wrapper = mount(DataModelPicker, {
        props: { label: "Field", disabled: true },
      })
      // Combobox disabled state propagates to the input.
      expect(wrapper.html()).toContain("disabled")
    })

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

    it("renders help text", () => {
      const wrapper = mount(DataModelPicker, {
        props: { label: "Field", helpText: "Dot-separated path" },
      })
      expect(wrapper.text()).toContain("Dot-separated path")
    })
  })

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

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