'use client';

import { useActionState } from 'react';
import { createEvent, type EventFormState } from '@/app/actions/events';
import { Field, SelectField, SubmitButton } from '@/components/ui/Field';
import { Button } from '@/components/ui/Button';
import { useMessages } from '@/i18n/client';

export function EventForm() {
  const [state, action] = useActionState<EventFormState | undefined, FormData>(createEvent, undefined);
  const v = state?.values;
  const all = useMessages().admin;
  const t = all.newEvent;
  const kindOptions = Object.entries(all.kinds).map(([value, label]) => ({ value, label }));

  return (
    <form action={action} className="space-y-5" noValidate>
      <Field
        label={t.name}
        name="name"
        placeholder={t.namePlaceholder}
        required
        defaultValue={v?.name}
        errors={state?.errors?.name}
      />
      <div className="grid gap-5 sm:grid-cols-2">
        <SelectField
          label={t.kind}
          name="kind"
          options={kindOptions}
          defaultValue={v?.kind || 'MALL'}
          errors={state?.errors?.kind}
        />
        <Field label={t.date} name="date" type="date" defaultValue={v?.date} errors={state?.errors?.date} />
      </div>
      <Field
        label={t.location}
        name="location"
        placeholder={t.locationPlaceholder}
        hint={t.locationHint}
        defaultValue={v?.location}
        errors={state?.errors?.location}
      />
      <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-end">
        <Button href="/admin" variant="outline">
          {t.cancel}
        </Button>
        <SubmitButton className="sm:w-auto">{t.submit}</SubmitButton>
      </div>
    </form>
  );
}