import type { NoteFormProps } from '../interfaces/note-editor'

const TITLE_REQUIRED_MESSAGE = 'Le titre est obligatoire.'

function NoteForm({
  title,
  content,
  titleMissing,
  cancelLabel,
  onTitleChange,
  onContentChange,
  onCancel,
  onSubmit,
}: NoteFormProps) {
  return (
    <form
      className="flex flex-col gap-4 rounded-2xl border border-gray-200 bg-white p-4 shadow-sm"
      onSubmit={(event) => {
        event.preventDefault()
        onSubmit()
      }}
    >
      <label className="flex flex-col gap-1">
        <span className="text-sm font-medium text-gray-500">Titre</span>
        <input
          value={title}
          onChange={(event) => onTitleChange(event.target.value)}
          autoFocus
          aria-invalid={titleMissing}
          className={`w-full rounded-lg border px-3 py-3 text-base focus:outline-none focus:ring-2 ${
            titleMissing
              ? 'border-red-500 focus:ring-red-500/30'
              : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/30'
          }`}
          placeholder="Sans titre"
        />
      </label>
      {titleMissing && (
        <span role="alert" className="text-sm text-red-600">
          {TITLE_REQUIRED_MESSAGE}
        </span>
      )}
      <label className="flex flex-col gap-1">
        <span className="text-sm font-medium text-gray-500">Contenu</span>
        <textarea
          value={content}
          onChange={(event) => onContentChange(event.target.value)}
          className="w-full min-h-48 rounded-lg border border-gray-300 px-3 py-3 text-base focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
          placeholder="Écrire ici…"
        />
      </label>
      <div className="flex justify-end gap-3">
        <button
          type="button"
          onClick={onCancel}
          className="rounded-lg border border-gray-300 px-5 py-3 text-gray-600 hover:bg-gray-50 active:bg-gray-100"
        >
          {cancelLabel}
        </button>
        <button
          type="submit"
          className="rounded-lg bg-blue-600 px-5 py-3 text-white hover:bg-blue-700 active:bg-blue-800"
        >
          Enregistrer
        </button>
      </div>
    </form>
  )
}

export default NoteForm