import { Form, Formik } from 'formik';
import * as Yup from 'yup';
import { useQuery } from '@tanstack/react-query';
import { ConfigurationAPI } from '@/Utils/APIRequest/Endpoints';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import usePost from '@/Utils/Hooks/usePost';
import { CustomToast } from '@/Utils/CustomToast';
import FormikInput from '@/Component/Common/Forms/FormikInput';
import { ErrorInfoSVG, LoaderSVG } from '@/Component/Common/SVGs/CommonSVG';
import GradientButton from '@/Component/Common/Forms/GradientButton';
import FormLabel from '@/Component/Common/Forms/FormLabel';
import Loader from '@/Layout/Loader';

const ConfigurationSettings = () => {

    // Get API
    const { data: SettingsDetailData, isPending: DetailLoader, refetch } = useQuery({ queryKey: [ConfigurationAPI], queryFn: () => CustomFetch({ url: `${ConfigurationAPI}/details` }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data?.data });

    // Put API
    const { isPending, mutate } = usePost(ConfigurationAPI, null, (response) => {
        if (response?.status == 200 || response?.status == 201) {
            CustomToast("success", "Settings updated successfully")
            refetch()
        }
    }, "Put");

    const initialValues = SettingsDetailData?.reduce((acc, item) => {
        acc[item.id] = item.value || '';
        return acc;
    }, {});

    const validationSchema = Yup.object().shape(
        SettingsDetailData?.reduce((acc, item) => {
            acc[item.id] = Yup.string()
                .matches(/^\d+$/, `${item.name} must be a number`)
                .required(`${item.name} is required`);
            return acc;
        }, {})
    );

    const handleSubmit = async (values) => {
        const request_array = Object.keys(values).map(key => ({
            id: key,
            value: values[key]
        }));
        const payload: any = { request_array };
        mutate(payload);
    };

    return (
        <>
            {DetailLoader && <Loader />}
            <Formik
                enableReinitialize validationSchema={validationSchema}
                initialValues={initialValues} onSubmit={handleSubmit}
            >
                {({ errors, touched }) => (
                    <Form>
                        <div className='grid 2xl:grid-cols-4 xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3'>
                            {SettingsDetailData?.map((item, i) => (
                                <div key={i}>
                                    <FormLabel title={item.name} />
                                    <div className={`relative`}>
                                        <FormikInput inputProps={{ type: "number", name: `${item.id}`, placeholder: `Enter ${item.name}`, inputMode: "numeric", pattern: "[0-9]*" }} />
                                        {errors[item.id] && touched[item.id] && (
                                            <div className="flex items-center mt-2">
                                                <ErrorInfoSVG customClass={'mr-1'} /><span className="text-error text-sm">
                                                    {`${errors[item.id]}`}
                                                </span>
                                            </div>
                                        )}
                                    </div>
                                </div>
                            ))}
                        </div>
                        <div className='flex items-center justify-start mt-5'>
                            <GradientButton buttonType={'submit'} customClass={'flex justify-center items-center w-full max-w-40'} disabled={isPending}>
                                Update
                                {isPending && <LoaderSVG customClass='ml-2.5' />}
                            </GradientButton>
                        </div>
                    </Form>
                )}
            </Formik>
        </>
    )
}

export default ConfigurationSettings