import { Form, Formik } from 'formik';
import { useQuery } from '@tanstack/react-query';
import { AdminPermissionAPI, UpdateSettingsAPI } from '@/Utils/APIRequest/Endpoints';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import usePost from '@/Utils/Hooks/usePost';
import { CustomToast } from '@/Utils/CustomToast';
import { LoaderSVG, WhiteCheckSVG } from '@/Component/Common/SVGs/CommonSVG';
import GradientButton from '@/Component/Common/Forms/GradientButton';
import Loader from '@/Layout/Loader';

const isPermissionEnabled = (value) => value === true || value === 'true';

const getPermissionLabel = (item) => {
    if (item?.type === 'work_order') return 'Work with Creators';
    return item?.name;
};

const PermissionSettings = () => {
    const { data: PermissionData, isPending: DetailLoader, refetch } = useQuery({
        queryKey: [AdminPermissionAPI],
        queryFn: () => CustomFetch({ url: AdminPermissionAPI }, null, false),
        refetchOnWindowFocus: false,
        select: (data) => data?.data?.data ?? data?.data?.permissions,
    });

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

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

    const handleSubmit = (values) => {
        const request_array: any[] = Object.keys(values).map((key) => ({
            id: key,
            value: values[key] ? 'true' : 'false',
        }));
        let request_data: any = {
            request_array: request_array
        }
        mutate(request_data);
    };

    return (
        <>
            {DetailLoader && <Loader />}
            <Formik enableReinitialize initialValues={initialValues} onSubmit={handleSubmit}>
                {({ values, setFieldValue }) => (
                    <Form>
                        <div className='grid 2xl:grid-cols-4 xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-3'>
                            {PermissionData?.map((item) => {
                                const checked = !!values[item.id];
                                return (
                                    <label key={item.id} className='flex items-center justify-between gap-3 bg-white border border-lightGray rounded-xl p-4 cursor-pointer'>
                                        <span className='font-medium'>{getPermissionLabel(item)}</span>
                                        <span className={`inline-flex items-center justify-center w-6 h-6 rounded-full border shrink-0 ${checked ? 'bg-primary border-primary' : 'bg-white border-gray'}`}>
                                            <input
                                                type='checkbox'
                                                className='sr-only'
                                                checked={checked}
                                                onChange={(e) => setFieldValue(item.id, e.target.checked)}
                                            />
                                            {checked && <WhiteCheckSVG customClass='w-3 h-3' />}
                                        </span>
                                    </label>
                                );
                            })}
                        </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 PermissionSettings;