import { ACTION_STATUSES, PRIORITIES } from '../constants/status.js'
import { ACTION_STATUS_LABELS, PRIORITY_LABELS } from '../constants/status.js'
import { ActorSelect } from './ActorSelect.jsx'

export function ActionForm({
  initial = {},
  actors = [],
  onSubmit,
  onCancel,
  busy = false,
  submitLabel = 'Speichern',
}) {
  async function handleSubmit(e) {
    e.preventDefault()
    const form = e.target
    const selected = actors.filter((a) => form[`actor_${a.id}`]?.checked).map((a) => a.id)
    await onSubmit({
      title: form.title.value.trim(),
      description: form.description.value,
      status: form.status.value,
      priority: form.priority.value,
      assigned_actor_ids: selected,
    })
  }

  const defaultActors = initial.assigned_actor_ids || []

  return (
    <form className="form workspace-form" onSubmit={handleSubmit}>
      <label>
        Titel
        <input name="title" defaultValue={initial.title || ''} required maxLength={255} />
      </label>
      <label>
        Beschreibung
        <textarea name="description" rows={2} defaultValue={initial.description || ''} />
      </label>
      <label>
        Status
        <select name="status" defaultValue={initial.status || 'open'}>
          {ACTION_STATUSES.map((s) => (
            <option key={s} value={s}>
              {ACTION_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>
      <ActorSelect actors={actors} defaultSelected={defaultActors} />
      <div className="form-actions">
        <button type="submit" disabled={busy}>
          {busy ? 'Speichern …' : submitLabel}
        </button>
        {onCancel && (
          <button type="button" className="secondary" onClick={onCancel} disabled={busy}>
            Abbrechen
          </button>
        )}
      </div>
    </form>
  )
}