"use client"
import { InputForm } from '@/components/Form/inputForm';
import { Form, Formik, FormikHelpers, FormikProps } from 'formik';
import React, { useEffect, useState } from 'react';
import * as Yup from 'yup';
// import { toast } from 'react-toastify';
import { BackButton } from '@/components/common/BackButton';

import { ButtonForm } from '@/components/Form/ButtonForm';
import { LoadingForm } from '@/components/Form/loadingForm';
import { getTranslation } from '../../../../i18n';
import { useRouter } from 'next/navigation';
import { OptionType, SelectForm } from '@/components/Form/SelectForm';
import DeleteModel from '@/components/common/DeleteModel';
import { UserCreate, useLazyUserGetDataByIdQuery, useUserCreateMutation, useUserGetDataQuery, useUserRemoveMutation, useUserUpdateMutation } from '@/services/user';
export interface FormValues extends UserCreate {

    photo?: string;
}

const CreateOrUpdateUserComponent = ({ id }: { id: string }) => {
    const { t }: any = getTranslation();
    const router = useRouter();

    const [UserGetDataById, { currentData: DataUserGetDataById, isFetching }] = useLazyUserGetDataByIdQuery()
    const [search, setSearch] = useState('')
    const { isFetching: isFetchingUser, currentData: DataUser } = useUserGetDataQuery({
        page: 1,
        paginate: 1000,
        search
    });


    useEffect(() => {
        if (id) {
            UserGetDataById({ id: String(id) })
        }
    }, [id])



    const validationSchema = Yup.object().shape({
        // title: Yup.string().required(t('this-field-is-required')),



    });
    const [UserCreate, { isLoading: isLoadingUserCreate }] = useUserCreateMutation();
    const [UserUpdate, { isLoading: isLoadingUserUpdate }] = useUserUpdateMutation();

    const handleSubmit = async (values: FormValues, { setSubmitting, resetForm }: FormikHelpers<FormValues>) => {

        try {
            var formData = new FormData();
            // Object.keys(values).forEach((key) => {
            //     formData.append(key, values[key] as any);
            // });
            formData.append('username', values.username);
            formData.append('email', values.email);
            formData.append('mobile', values.mobile);
            values.password &&
                formData.append('password', values.password);
            formData.append('country', values.country);
            values.files &&
                formData.append('files', values.files as any);
            formData.append('fullName', values.fullName);

            if (id) {
                await UserUpdate({
                    id: String(id),
                    body: formData
                }).unwrap();
            } else {
                await UserCreate(formData).unwrap();
            }


            // toast.success(t(id ? "updated-successfully" : "added-successfully"), { autoClose: 3000 });
            resetForm();
            router.push('/user')

        } catch (error: any) {
            console.error('Failed to operation :', error);
            if (error && error.message) {
                // return toast.error(error.message, { autoClose: 3000 });
            }
            // toast.error(error, { autoClose: 3000 });
        }

    };
    const [UserRemove, { isLoading: isLoadingUserRemove }] = useUserRemoveMutation();
    const handleRemove = async () => {
        try {
            await UserRemove({ id: id }).unwrap();
            // toast.success(t("deleted-successfully"), { autoClose: 3000 });
            router.push('/user')
        } catch (error: any) {
            console.error('Failed to operation :', error);
            if (error && error.message) {
                // return toast.error(error.message, { autoClose: 3000 });
            }
            // toast.error(error, { autoClose: 3000 });
        }
    };

    return (
        <>

            <div className="mx-auto my-0 max-md:max-w-[100%] md:max-w-[50%]">
                <BackButton title={t("users")} />
                {isFetching ?
                    <LoadingForm /> :
                    <Formik<FormValues>
                        initialValues={{
                            fullName: DataUserGetDataById?.info.fullName ?? "",
                            username: DataUserGetDataById?.info.username ?? "",
                            country: DataUserGetDataById?.info.country ?? "",
                            mobile: DataUserGetDataById?.info.mobile ?? "",
                            photo: DataUserGetDataById?.info.photo ?? "",
                            email: DataUserGetDataById?.info.email ?? "",
                            role: DataUserGetDataById?.info.role ?? "",
                            password: "",
                            status: DataUserGetDataById?.info.status == true,
                            files: "",
                        }}
                        validationSchema={validationSchema}
                        onSubmit={handleSubmit}

                    >

                        {(props: FormikProps<any>) => (
                            <Form className={'p-4 flex flex-col gap-4'}>

                                <div className="Card">
                                    <div className=" text-base font-semibold text-black dark:text-white-dark  mb-2 ">
                                        {t('user-information')}
                                    </div>

                                    <InputForm
                                        formikProps={props}
                                        name={'fullName'}
                                        title={t('fullName')}
                                        placeholder={t('enter-fullName')}
                                    />
                                    <InputForm
                                        formikProps={props}
                                        name={'username'}
                                        title={t('username')}
                                        placeholder={t('enter-username')}
                                    />
                                    <InputForm
                                        formikProps={props}
                                        name={'country'}
                                        title={t('country')}
                                        placeholder={t('enter-country')}
                                    />
                                    <InputForm
                                        formikProps={props}
                                        name={'mobile'}
                                        title={t('mobile')}
                                        placeholder={t('enter-mobile')}
                                    />
                                    <InputForm
                                        formikProps={props}
                                        name={'email'}
                                        title={t('email')}
                                        placeholder={t('enter-email')}
                                    />
                                    <InputForm
                                        formikProps={props}
                                        name={'password'}
                                        title={t('password')}
                                        placeholder={t('enter-password')}

                                    />
                                    <SelectForm
                                        formikProps={props}
                                        name={'role'}
                                        title={t('role')}
                                        placeholder={t('choses-role')}
                                        options={[
                                            { label: t('admin'), value: "admin" },
                                            { label: t('user'), value: "user" }
                                        ]}
                                        props={{
                                            isClearable: true,
                                            onChange: (val) => {
                                                props.setFieldValue('role', (val as OptionType)?.value ?? "")
                                            }
                                        }}
                                    />


                                    {/* <SelectForm
                                        formikProps={props}
                                        name={'status'}
                                        title={t('status')}
                                        placeholder={t('choses-status')}
                                        options={[
                                            { label: t('active'), value: "true" },
                                            { label: t('inactive'), value: "false" }
                                        ]}
                                        props={{
                                            isClearable: true,
                                            onChange: (val) => {
                                                props.setFieldValue('status', (val as OptionType)?.value ?? "")
                                            }
                                        }}
                                    /> */}


                                </div>

                                <div className='flex flex-row-reverse gap-2'>
                                    <ButtonForm
                                        title={t(id ? "update" : 'add')}
                                        isLoading={isLoadingUserCreate || isLoadingUserUpdate}

                                    />
                                    {
                                        id && <ButtonForm
                                            props={{
                                                onClick: () => {
                                                    router.push(`/user/createOrUpdate?id=${id}&openDeleteModel=true`)
                                                },
                                                type: 'button',
                                                className: " hover:!bg-danger/10 !border-danger/70 !text-danger/70 !bg-transparent "
                                            }}
                                            title={t('delete')}
                                            isLoading={false}
                                        />
                                    }
                                </div>
                            </Form>
                        )
                        }
                    </Formik>
                }
            </div>
            <DeleteModel name={String(DataUserGetDataById?.info.fullName)} title={t('delete-user')} handleRemove={handleRemove} isLoading={isLoadingUserRemove} description={t('are-you-sure-you-want-to-delete-this-user')} />
        </>
    );
};

export default CreateOrUpdateUserComponent