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

describe("DatePicker (props-based composition)", () => {
  describe("rendering", () => {
    it("renders the label and a popover trigger button", () => {
      const wrapper = mount(DatePicker, { props: { label: "Starts at" } })
      expect(wrapper.text()).toContain("Starts at")
      expect(wrapper.find("button").exists()).toBe(true)
    })

    it("shows the placeholder when no value is set", () => {
      const wrapper = mount(DatePicker, {
        props: { label: "Starts at", placeholder: "Pick one" },
      })
      expect(wrapper.text()).toContain("Pick one")
    })

    it("falls back to the default placeholder when nothing is set", () => {
      const wrapper = mount(DatePicker, { props: { label: "Starts at" } })
      expect(wrapper.text()).toContain("Pick a date")
    })

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

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

  describe("value binding", () => {
    it("renders the modelValue ISO date", () => {
      const wrapper = mount(DatePicker, {
        props: { label: "Starts at", modelValue: "2024-06-15" },
      })
      expect(wrapper.text()).toContain("2024-06-15")
    })

    it("renders an empty value gracefully", () => {
      const wrapper = mount(DatePicker, { props: { label: "Starts at" } })
      expect(wrapper.exists()).toBe(true)
    })
  })

  describe("state matrix", () => {
    it("disables the trigger when disabled", () => {
      const wrapper = mount(DatePicker, {
        props: { label: "Starts at", disabled: true },
      })
      expect(wrapper.find("button").attributes("disabled")).toBeDefined()
    })

    it("marks the trigger as readonly via data attribute", () => {
      const wrapper = mount(DatePicker, {
        props: { label: "Starts at", readonly: true },
      })
      expect(wrapper.find("button").attributes("data-readonly")).toBe("true")
    })

    it("renders help text when provided", () => {
      const wrapper = mount(DatePicker, {
        props: { label: "Starts at", helpText: "ISO date format" },
      })
      expect(wrapper.text()).toContain("ISO date format")
    })
  })

  describe("errors", () => {
    it("renders errors from props", () => {
      const wrapper = mount(DatePicker, {
        props: { label: "Starts at", errors: ["Required field"] },
      })
      expect(wrapper.text()).toContain("Required field")
      expect(wrapper.find("[role='alert']").exists()).toBe(true)
    })
  })

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