Untitled

'use client';

import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { toast } from 'react-toastify';
import { z } from 'zod';
import { Button } from '@/components/global/button';
import FormField from '@/components/routes/global/form-field';
import { useApiCall } from '@/hooks/global/api-call';
import { useControlModal } from '@/hooks/global/control-modal';
import { APIsendForm } from '@/services/routes/correcting/send-form';
import { TFormField } from '@/types/global/form-field';
import { generateUniqueId } from '@/utils/generate-uniqe-id';

interface IOrderFormProps {
  price: {
    speaking: number;
    writing: number;
    minimum: number;
  };
}

export const OrderForm = (props: IOrderFormProps) => {
  // Modal gateway
  const modalGateway = useControlModal('gateway');

  // Form
  const [callApiSubmitBtn, isLoadingSubmitBtn] = useApiCall();
  const formSchema = z.object({
    correctType: z.string().min(1, { message: 'نوع را انتخاب کنید' }),
    quantityCharacter: z.string().min(1, { message: 'تعداد کلمه را بنویسید' }),
    detail: z.string().min(1, { message: 'توضیحات را بنویسید' }),
    file: z.any().refine((val) => val?.length > 0, 'فایل را انتخاب کنید'),
  });
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      correctType: '',
      quantityCharacter: '',
      detail: '',
      file: undefined,
    },
  });
  const formFields: Record<string, TFormField> = {
    correctType: {
      type: 'select',
      label: 'نوع تصحیح',
      placeholder: 'نوع را انتخاب کنید ...',
      isRequired: true,
      controller: form.register('correctType'),
      options: ['رایتینگ', 'اسپیکینگ'],
      errorMsg: form.formState.errors.correctType?.message,
    },
    ...(form.watch('correctType').length && {
      file: {
        type: 'file',
        accept:
          form.watch('correctType') === 'رایتینگ'
            ? ['.docx', '.doc']
            : ['.wav'],
        label: 'فایل',
        placeholder: 'فایل ویس را انتخاب کنید ...',
        isRequired: true,
        controller: form.register('file'),
        errorMsg: form.formState.errors.file?.message as string,
      },
    }),
    quantityCharacter: {
      type: 'number',
      label: 'تعداد کلمه',
      placeholder: 'تعداد کلمه را بنویسید ...',
      isRequired: true,
      controller: form.register('quantityCharacter'),
      errorMsg: form.formState.errors.quantityCharacter?.message,
    },
    detail: {
      type: 'textarea',
      label: 'توضیحات',
      placeholder: ' توضیحات را بنویسید ...',
      isRequired: true,
      controller: form.register('detail'),
      errorMsg: form.formState.errors.detail?.message,
    },
  };
  const handleSubmitForm = async () => {
    // ...
  };

  // Calculate price
  const calcPrice = () => {
    const correctType = form.watch('correctType');
    const quantityCharacter = Number(form.watch('quantityCharacter'));
    return (
      (correctType === 'رایتینگ' ? props.price.writing : props.price.speaking) *
      quantityCharacter
    );
  };

  return (
    <section className="relative flex flex-col gap-3 rounded-xl border bg-white p-5 shadow md:mx-3">
      <form
        onSubmit={form.handleSubmit(handleSubmitForm)}
        className="flex flex-col items-end gap-2"
      >
        {/* Fields */}
        <div className="flex w-full flex-col gap-2">
          {Object.keys(formFields).map((key) => (
            <FormField key={generateUniqueId()} {...formFields[key]!} />
          ))}
        </div>
        {/* Submit btn / Price */}
        <div className="flex flex-col gap-1">
          <div className="flex items-center gap-2">
            {/* Price */}
            {calcPrice() > 0 && (
              <div className="flex flex-col">
                <span className="text-sm text-gray-600">
                  مبلغ قابل پرداخت :
                </span>
                <span className="font-medium">
                  {calcPrice().toLocaleString('fa')} هزار تومان
                </span>
              </div>
            )}
            {/* Submit btn */}
            <Button
              disabled={isLoadingSubmitBtn}
              className="mt-2 h-[42px] w-fit justify-center bg-purple px-5 font-medium"
            >
              ثبت سفارش
            </Button>
          </div>
        </div>
      </form>
    </section>
  );
};