import { createElement } from "react"
import { renderToStaticMarkup } from "react-dom/server"
import { describe, expect, it } from "vitest"

import { SubmitButton } from "@/components/forms/submitButton"

const submitButtonCopy = {
  defaultLabel: "Enviar",
  processing: "Procesando",
  success: "Completado",
}

function renderSubmitButton(
  props: Partial<Parameters<typeof SubmitButton>[0]> = {},
) {
  return renderToStaticMarkup(
    createElement(SubmitButton, {
      copy: submitButtonCopy,
      isSubmitting: false,
      isSubmitSuccessful: false,
      ...props,
    }),
  )
}

describe("SubmitButton", () => {
  it("uses localized default copy when children are absent", () => {
    const html = renderSubmitButton()

    expect(html).toContain(submitButtonCopy.defaultLabel)
    expect(html).not.toContain("Submit")
  })

  it("uses localized processing copy", () => {
    const html = renderSubmitButton({ isSubmitting: true })

    expect(html).toContain(submitButtonCopy.processing)
    expect(html).not.toContain("Processing")
  })

  it("uses localized success copy", () => {
    const html = renderSubmitButton({ isSubmitSuccessful: true })

    expect(html).toContain(submitButtonCopy.success)
    expect(html).not.toContain("Success")
  })

  it("keeps caller-provided children as the idle label only", () => {
    const idleHtml = renderSubmitButton({ children: "Create Item" })
    const processingHtml = renderSubmitButton({
      children: "Create Item",
      isSubmitting: true,
    })

    expect(idleHtml).toContain("Create Item")
    expect(idleHtml).not.toContain(submitButtonCopy.defaultLabel)
    expect(processingHtml).toContain(submitButtonCopy.processing)
    expect(processingHtml).not.toContain("Create Item")
  })
})