"use client";
import { InputForm } from '@/components/Form/inputForm';
import { Form, Formik, FormikProps } from 'formik';
import React from 'react';
import { getTranslation } from '../../../../i18n';
import { useCreateSchoolMutation } from '@/services/Schools';
import { toast } from 'react-toastify';
import { useRouter } from 'next/navigation';

// export const metadata: Metadata = {
//     title: 'Sales Admin',
// };

export interface FormValues {
    name: string
    email: string
    phone: string
    address: string
    notes: string
}

const Page = () => {
    const { t } = getTranslation();
    const [Register, { isLoading }] = useCreateSchoolMutation();
    const router = useRouter()


    return <div className='flex justify-center items-center md:gap-8  h-full w-full'>
        <div className="w-full max-w-lg sm:w-[480px] p-8 rounded-[32px] border border-zinc-300">
            <div className="text-center text-black text-opacity-90 text-2xl font-bold font-['Alexandria'] leading-9">  {t('school-registration')}</div>
            <Formik<FormValues>
                initialValues={{
                    name: "",
                    email: "",
                    phone: "",
                    address: "",
                    notes: "",
                }}
                onSubmit={async (values) => {
                    try {
                        await Register({ ...values }).unwrap();
                        toast.success(t("added-successfully"), { autoClose: 3000 });
                        router.push('/');
                    } catch (error: any) {
                        console.log("error", error);
                        if (error && error.message) {
                            return toast.error(error.message, { autoClose: 3000 });
                        }
                        toast.error(JSON.stringify(error), { autoClose: 3000 });

                    }

                }}

            >
                {(props: FormikProps<any>) => (
                    <Form className={'flex flex-col gap-4'}>
                        <InputForm
                            className="text-black text-opacity-90 text-sm font-normal font-['Alexandria'] leading-[21px] h-14 bg-white rounded-[63px] border border-zinc-300"
                            formikProps={props}
                            name={'name'}
                            title={t('name')}
                            placeholder={t('enter-name')}
                            props={{
                                type: 'text',
                            }}
                        />
                        <InputForm
                            className="text-black text-opacity-90 text-sm font-normal font-['Alexandria'] leading-[21px] h-14 bg-white rounded-[63px] border border-zinc-300"
                            formikProps={props}
                            name={'email'}
                            title={t('email')}
                            placeholder={t('enter-email')}
                            props={{
                                type: 'email',
                            }}
                        />

                        <InputForm
                            className="text-black text-opacity-90 text-sm font-normal font-['Alexandria'] leading-[21px] h-14 bg-white rounded-[63px] border border-zinc-300"
                            formikProps={props}
                            name={'phone'}
                            title={t('phone')}
                            placeholder={t('enter-phone')}
                            props={{
                                type: 'number',
                            }}
                        />
                        <InputForm
                            className="text-black text-opacity-90 text-sm font-normal font-['Alexandria'] leading-[21px] h-14 bg-white rounded-[63px] border border-zinc-300"
                            formikProps={props}
                            name={'address'}
                            title={t('address')}
                            placeholder={t('enter-address')}
                        />
                        <InputForm
                            className="text-black text-opacity-90 text-sm font-normal font-['Alexandria'] leading-[21px] h-14 bg-white rounded-[63px] border border-zinc-300"
                            formikProps={props}
                            name={'notes'}
                            title={t('notes')}
                            placeholder={t('enter-notes')}
                            props={{
                                type: "textarea"
                            }}
                        />




                        <button type="submit" className="h-[54px] px-[38px] py-[26px] bg-primary rounded-[96px] justify-center items-center gap-1.5 inline-flex">
                            {isLoading &&
                                <span className="animate-spin border-2 border-white border-l-transparent rounded-full w-5 h-5 ltr:mr-4 rtl:ml-4 inline-block align-middle"></span>
                            }
                            <div className="text-center text-white text-base font-medium font-['Alexandria'] leading-normal">{t("send")}</div>
                        </button>
                    </Form>)}
            </Formik>

        </div>

        <div id="danger-toast"></div>
    </div>;
};

export default Page;