Untitled

'use client';

import React from 'react';
// eslint-disable-next-line -- Check package react-dom
import { useFormState } from 'react-dom';
import { createFormHandler } from '@/actions/create-form-handler';
import SubmitButton from '@/components/buttons/submit-button';
import { fieldNames } from '@/components/forms/fields/field-names';
import {
  InputField,
  TextAreaField,
  TermsCheckbox,
} from '@/components/forms/fields/fields';
import { MoneyField } from './fields/money-field';
import { Divider } from './fields/divider';
import { DateField, now } from './fields/date';
import { UrlField } from './fields/url-field';

export default function CreateProject(): React.JSX.Element {
  const [state, formAction] = useFormState(createFormHandler, null);

  return (
    <form action={formAction} className='max-w-2xl mx-auto mb-52'>
      <InputField
        id={fieldNames.title}
        label='Назва збору *'
        name={fieldNames.title}
        placeholder='Вкажіть назву для збору'
      />
      <TextAreaField
        id={fieldNames.description}
        label='На що збираємо? *'
        name={fieldNames.description}
        placeholder='Розкажіть трохи про збір та його мету'
      />
      <MoneyField
        id={fieldNames.goal}
        label='Ціль збору *'
        name={fieldNames.goal}
        placeholder='Вкажіть суму в гривнях'
      />
      <DateField
        defaultValue={now()}
        id={fieldNames.date}
        label='Дата старту збору *'
        name={fieldNames.date}
        placeholder='Оберіть дату старту збору'
      />
      <Divider />
      <InputField
        id={fieldNames.organizationName}
        label='Хто збирає *'
        name={fieldNames.organizationName}
        placeholder='Імʼя волонтера / Назва організації'
      />
      <UrlField
        id={fieldNames.organizationUrl}
        label='Публічна сторінка (веб-сайт) *'
        name={fieldNames.organizationUrl}
        placeholder='Профіль волонтера в соц мережі / Сайт організації'
      />
      <Divider />
      <TextAreaField
        id={fieldNames.jars}
        label='Список посилань на монобанки *'
        name={fieldNames.jars}
        placeholder='Кожне посилання окремо в новому рядку'
        rows={14}
      />
      {state?.message ? (
        <p className='mb-5 text-sm text-red-500'>
          <span className='font-medium'>Ой вей! </span>Сталася помилка!
          Перевірте будь ласка правильність даних.
        </p>
      ) : null}
      <TermsCheckbox />
      <SubmitButton onLoading='⏳ Публікуємо' title='Опублікувати' />
    </form>
  );
}