"use client"
import { InputForm } from '@/components/Form/inputForm';
import { FieldArray, 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 { QuestionsDataResponse, useLazyQuestionsGetDataByIdQuery, useQuestionsCreateMutation, useQuestionsRemoveMutation, useQuestionsUpdateMutation } from '@/services/questions';
import { useRouter } from 'next/navigation';
import { OptionType, SelectForm } from '@/components/Form/SelectForm';
import DeleteModel from '@/components/common/DeleteModel';
import { UploadFileForm } from '@/components/Form/uploadFileForm';
import { BASE_URL } from '@/services/api';
import { useTheorytrainsGetDataQuery } from '@/services/theorytrains';
export interface FormValues extends QuestionsDataResponse {

    choiceData: {
        id?: number
        choice: string
        status: string
    }[]
    isCorrectedChoice?: string

}

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

    const [QuestionsGetDataById, { currentData: DataQuestionsGetDataById, isFetching }] = useLazyQuestionsGetDataByIdQuery()
    const [search, setSearch] = useState('')
    const { isFetching: isFetchingTheorytrains, currentData: DataTheorytrains } = useTheorytrainsGetDataQuery({
        page: 1,
        paginate: 1000,
        search
    });


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



    const validationSchema = Yup.object().shape({
        question: Yup.string().required(t('this-field-is-required')),
        TheoryTrainId: Yup.string().required(t('this-field-is-required')),
        score: Yup.number().required(t('this-field-is-required')),
        // img: Yup.string().required(t('this-field-is-required')),
        isCorrectedChoice :Yup.string().required(t('this-field-is-required')),



    });
    const [QuestionsCreate, { isLoading: isLoadingQuestionsCreate }] = useQuestionsCreateMutation();
    const [QuestionsUpdate, { isLoading: isLoadingQuestionsUpdate }] = useQuestionsUpdateMutation();

    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('question', values.question);
            formData.append('theoryTrainId', values.TheoryTrainId);
            formData.append('score', values.score);
            formData.append('files', values.img);
            formData.append('status', String(values.status));
           const newData= values.choiceData.map((item) => {
                if (item.id == values.isCorrectedChoice) {
                    return {...item, status: "true"};
                }
                return item
            })
            formData.append('choices', JSON.stringify(newData));


            if (id) {
                await QuestionsUpdate({
                    id: String(id),
                    body: formData
                }).unwrap();
            } else {
                await QuestionsCreate({
                    id: String(Math.random()),
                    body: formData
                }).unwrap();
            }


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

        } 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 [QuestionsRemove, { isLoading: isLoadingQuestionsRemove }] = useQuestionsRemoveMutation();
    const handleRemove = async () => {
        try {
            await QuestionsRemove({ id: id }).unwrap();
            // toast.success(t("deleted-successfully"), { autoClose: 3000 });
            router.push('/questions')
        } 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("questions")} />
                {isFetching ?
                    <LoadingForm /> :
                    <Formik<FormValues>
                        initialValues={{
                            question: DataQuestionsGetDataById?.info.question ?? "",
                            TheoryTrainId: DataQuestionsGetDataById?.info.TheoryTrainId ?? "",
                            score: DataQuestionsGetDataById?.info.score ?? "",
                            img: DataQuestionsGetDataById?.info.img ?? "",
                            status: String(DataQuestionsGetDataById?.info.status ?? true) as any,
                            choiceData: DataQuestionsGetDataById?.info.Choices ?? [],
                            isCorrectedChoice: DataQuestionsGetDataById?.info.Choices?.find(x => x.status == true)?.id,

                        }}
                        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('question-information')}
                                    </div>

                                    <InputForm
                                        formikProps={props}
                                        name={'question'}
                                        title={t('question')}
                                        placeholder={t('enter-question')}
                                    />
                                    <InputForm
                                        formikProps={props}
                                        name={'score'}
                                        title={t('score')}
                                        placeholder={t('enter-score')}
                                    />
                                    {!id && <SelectForm
                                        formikProps={props}
                                        name={'TheoryTrainId'}
                                        title={t('theorytrains')}
                                        placeholder={t('choses-theorytrains')}
                                        options={DataTheorytrains?.details?.docs?.map((item) => {
                                            return { label: item.title, value: item.id }
                                        })
                                            ?? [] as any
                                        }
                                        props={
                                            {
                                                isLoading: isFetchingTheorytrains,
                                                isClearable: true,
                                                onInputChange: (value) => {
                                                    setSearch(value)
                                                },
                                                onChange: (value) => {
                                                    props.setFieldValue('TheoryTrainId', (value as OptionType)?.value ?? "")
                                                }

                                            }

                                        }
                                    />}
                                    <UploadFileForm
                                        valueFileName={BASE_URL + `questions/${DataQuestionsGetDataById?.info.id}/${DataQuestionsGetDataById?.info.img}`}
                                        formikProps={props}
                                        name={'img'}
                                        title={t('img')}
                                        placeholder={t('enter-img')}
                                    />

                                    {/* <SelectForm
                                        formikProps={props}
                                        name={'status'}
                                        title={t('status')}
                                        placeholder={t('choses-status')}
                                        options={[
                                            { label: t('active'), value: "true" },
                                            { label: t('inactive'), value: "false" },
                                        ]}

                                    /> */}

                                </div>

                                <div className="Card">
                                    <div className=" text-base font-semibold text-black dark:text-white-dark  mb-2 ">
                                        {t('choice-information')}
                                    </div>
                                    <FieldArray name="choiceData">
                                        {({ insert, remove, push, replace }) => (
                                            <div className={'flex flex-col gap-2'}>
                                                {props.values.choiceData?.map((_: any, index: number) => {
                                                    return (
                                                        <div
                                                            className={'border rounded-md p-4'}
                                                            key={index}
                                                        >
                                                            <div className="flex  gap-4 max-md:flex-wrap ">

                                                                <InputForm
                                                                    formikProps={props}
                                                                    name={`choiceData.${index}.choice`}
                                                                    title={t('choice') + (index + 1)}
                                                                    placeholder={t('enter-choice')}
                                                                />
                                                                {/* <SelectForm
                                                                    className='w-full'
                                                                    formikProps={props}
                                                                    name={`choiceData.${index}.status`}
                                                                    title={t('status')}
                                                                    placeholder={t('choses-status')}
                                                                    options={[
                                                                        { label: t('active'), value: "true" },
                                                                        { label: t('inactive'), value: "false" },
                                                                    ]}
                                                                    props={{
                                                                        isClearable: true,
                                                                        onChange: (val) => {
                                                                            replace(index, {
                                                                                choice: props.values.choiceData[index].choice,
                                                                                status: (val as any).value == "true" ? true : false
                                                                            })
                                                                        }

                                                                    }}
                                                                /> */}
                                                            </div>


                                                            <div className="flex justify-end">
                                                                <button type="button"
                                                                    className=" hover:bg-danger/10 border-danger/70 text-danger/70  hover:scale-[1.01] transition-transform py-[2px] px-2  rounded border"
                                                                    onClick={() => remove(index)}>
                                                                    {t('delete')}
                                                                </button>
                                                            </div>
                                                        </div>
                                                    );
                                                })}
                                                <div className="flex justify-end gap-2">
                                                    <button type="button"
                                                        className=" bg-primary/10 hover:bg-primary/20 border-primary/70 text-primary/70 hover:scale-[1.01] transition-transform py-1 px-2   rounded border"
                                                        onClick={() => push({
                                                            id: Math.random(),
                                                            choice: "",
                                                            status: false,
                                                        })}>
                                                        {t('add-choice')}
                                                    </button>

                                                </div>
                                            </div>
                                        )}
                                    </FieldArray>

                                    <SelectForm
                                        className='w-full'
                                        formikProps={props}
                                        name={`isCorrectedChoice`}
                                        title={t('isCorrectedChoice')}
                                        placeholder={t('choses-isCorrectedChoice')}
                                        options={
                                            props.values.choiceData?.map((val: { id: any; choice: any; }) => {

                                                return { value: val.id, label: val.choice }
                                            })
                                        }
                                        props={{
                                            isClearable: true,
                                        }}
                                    />

                                </div>




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

                                    />
                                    {
                                        id && <ButtonForm
                                            props={{
                                                onClick: () => {
                                                    router.push(`/questions/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(DataQuestionsGetDataById?.info.question)} title={t('delete-questions')} handleRemove={handleRemove} isLoading={isLoadingQuestionsRemove} description={t('are-you-sure-you-want-to-delete-this-questions')} />
        </>
    );
};

export default CreateOrUpdateQuestionsComponent