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

describe("TimePicker (props-based composition)", () => {
  describe("rendering", () => {
    it("renders the label and two inputs", () => {
      const wrapper = mount(TimePicker, { props: { label: "Opens at" } })
      expect(wrapper.text()).toContain("Opens at")
      expect(wrapper.findAll("input").length).toBe(2)
    })

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

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

  describe("value binding", () => {
    it("splits a modelValue into hour/minute", () => {
      const wrapper = mount(TimePicker, {
        props: { label: "Opens at", modelValue: "09:30" },
      })
      const inputs = wrapper.findAll("input")
      expect((inputs[0]!.element as HTMLInputElement).value).toBe("09")
      expect((inputs[1]!.element as HTMLInputElement).value).toBe("30")
    })

    it("emits update:modelValue when the user types", async () => {
      const wrapper = mount(TimePicker, { props: { label: "Opens at" } })
      const [hh, mm] = wrapper.findAll("input")
      await hh!.setValue("8")
      await mm!.setValue("45")
      const emitted = wrapper.emitted("update:modelValue")
      expect(emitted).toBeTruthy()
      expect(emitted![emitted!.length - 1]).toEqual(["08:45"])
    })
  })

  describe("state matrix", () => {
    it("disables both inputs when disabled", () => {
      const wrapper = mount(TimePicker, {
        props: { label: "Opens at", disabled: true },
      })
      expect(wrapper.findAll("input[disabled]").length).toBe(2)
    })

    it("applies minuteStep to the minute input", () => {
      const wrapper = mount(TimePicker, {
        props: { label: "Opens at", minuteStep: 15 },
      })
      const inputs = wrapper.findAll("input")
      expect(inputs[1]!.attributes("step")).toBe("15")
    })

    it("renders help text", () => {
      const wrapper = mount(TimePicker, {
        props: { label: "Opens at", helpText: "24-hour clock" },
      })
      expect(wrapper.text()).toContain("24-hour clock")
    })
  })

  describe("errors", () => {
    it("renders errors from props", () => {
      const wrapper = mount(TimePicker, {
        props: { label: "Opens at", errors: ["Invalid time"] },
      })
      expect(wrapper.text()).toContain("Invalid time")
    })
  })

  it("works without any props at all", () => {
    const wrapper = mount(TimePicker)
    expect(wrapper.findAll("input").length).toBe(2)
  })
})
