import { INITIATIVE_STATUSES, PRIORITIES } from '../constants/status.js'
import { INITIATIVE_STATUS_LABELS, PRIORITY_LABELS } from '../constants/status.js'

export function InitiativeForm({
  initial = {},
  onSubmit,
  onCancel,
  busy = false,
  submitLabel = 'Speichern',
}) {
  async function handleSubmit(e) {
    e.preventDefault()
    const form = e.target
    await onSubmit({
      title: form.title.value.trim(),
      goal: form.goal.value,
      status: form.status.value,
      priority: form.priority.value,
    })
  }

  return (
    <form className="form workspace-form" onSubmit={handleSubmit}>
      <label>
        Titel
        <input name="title" defaultValue={initial.title || ''} required maxLength={255} />
      </label>
      <label>
        Ziel
        <textarea name="goal" rows={3} defaultValue={initial.goal || ''} />
      </label>
      <label>
        Status
        <select name="status" defaultValue={initial.status || 'active'}>
          {INITIATIVE_STATUSES.map((s) => (
            <option key={s} value={s}>
              {INITIATIVE_STATUS_LABELS[s]}
            </option>
          ))}
        </select>
      </label>
      <label>
        Priorität
        <select name="priority" defaultValue={initial.priority || 'normal'}>
          {PRIORITIES.map((p) => (
            <option key={p} value={p}>
              {PRIORITY_LABELS[p]}
            </option>
          ))}
        </select>
      </label>
      <div className="form-actions">
        <button type="submit" className="btn btn-primary" disabled={busy}>
          {busy ? 'Speichern …' : submitLabel}
        </button>
        {onCancel && (
          <button type="button" className="btn btn-secondary" onClick={onCancel} disabled={busy}>
            Abbrechen
          </button>
        )}
      </div>
    </form>
  )
}