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

describe("TextareaInput (props-based composition)", () => {
  it("mounts and renders the label via FieldFrame", () => {
    const wrapper = mount(TextareaInput, { props: { label: "Bio" } })
    expect(wrapper.find("textarea").exists()).toBe(true)
    expect(wrapper.text()).toContain("Bio")
  })

  it("forwards modelValue", () => {
    const wrapper = mount(TextareaInput, {
      props: { modelValue: "hello world" },
    })
    expect((wrapper.find("textarea").element as HTMLTextAreaElement).value).toBe(
      "hello world",
    )
  })

  it("emits update:modelValue on input", async () => {
    const wrapper = mount(TextareaInput, { props: { modelValue: "" } })
    await wrapper.find("textarea").setValue("typed text")
    const emitted = wrapper.emitted("update:modelValue")
    expect(emitted).toBeTruthy()
    expect(emitted![emitted!.length - 1]).toEqual(["typed text"])
  })

  it("forwards rows", () => {
    const wrapper = mount(TextareaInput, { props: { rows: 8 } })
    expect(wrapper.find("textarea").attributes("rows")).toBe("8")
  })

  it("defaults rows to 3", () => {
    const wrapper = mount(TextareaInput)
    expect(wrapper.find("textarea").attributes("rows")).toBe("3")
  })

  it("renders errors", () => {
    const wrapper = mount(TextareaInput, { props: { errors: ["Required"] } })
    expect(wrapper.find("[data-testid='field-frame-errors']").exists()).toBe(true)
    expect(wrapper.find("textarea").classes()).toContain("border-destructive")
  })

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