'use client'

import { useActionState } from 'react'
import { notifyText } from '@/lib/i18n/shell'
import { saveNotifyModeAction, type ActionResult } from './actions'

const MODES = ['ALL', 'OWN_CASES', 'MENTIONS', 'OFF'] as const

export function NotifyForm({ current }: { current: string }) {
  const [state, action, pending] = useActionState<ActionResult | null, FormData>(
    saveNotifyModeAction,
    null,
  )

  return (
    <form action={action} className="mt-6">
      <fieldset>
        <legend className="font-condensed text-xs text-text-dim">{notifyText.mode}</legend>
        <div className="mt-3 space-y-2">
          {MODES.map((mode) => (
            <label key={mode} className="flex items-center gap-3 text-sm">
              <input type="radio" name="notifyMode" value={mode} defaultChecked={current === mode} />
              {notifyText.modes[mode]}
            </label>
          ))}
        </div>
      </fieldset>

      <div className="mt-5 flex items-center gap-3">
        <button
          type="submit"
          disabled={pending}
          className="btn btn-primary"
        >
          {notifyText.save}
        </button>
        {state?.ok ? (
          <span className="font-condensed text-2xs text-text-dim">{notifyText.saved}</span>
        ) : null}
        {state && !state.ok ? (
          <span className="font-condensed text-2xs text-stamp-4">{state.error}</span>
        ) : null}
      </div>
    </form>
  )
}