import {useMutation} from '@tanstack/react-query'
import {Formik, Form} from 'formik'
import * as Yup from "yup";
// import InputText from '../InputText'
import {updateProduct} from '../../services/siteServices'
// import queryKeys from '../../services/queryKeys';


// To get the validation schema
const validationSchema = Yup.object().shape({
    details: Yup.string().required("details text is required").min(6, 'must be upto 6 characters').max(500, 'must not exceed 500 characters'),
    sale_text: Yup.string().required("sales text is required").min(6, 'must be upto 6 characters').max(500, 'must not exceed 500 characters'),
});

export default function ProductDetails({productDetails}) {

    const initialValues = {
        details: productDetails?.details,
        sale_text: productDetails?.sale_text,
    };

    // const queryClient = useQueryClient()

    const productUpdate = useMutation({
        mutationFn: (fields) => {
            return updateProduct(fields)
        },
        onSuccess: () => {
            // queryClient.refetchQueries({
            //     queryKey: [...queryKeys.custom_template],
            //     // type: 'active',
            //     // exact: true,
            // })
        },
        onSettled: ()=>{
            setTimeout(()=>{
                productUpdate.reset()
            }, 3000)
        }
    })

    //FUNCTION TO HANDLE ADD TEMPLATE
    const handleSubmit = (values, helper) => {
        const reqData = {
            details: values.details,
            product_detail_id: productDetails?.product_detail_id,
            product_id: productDetails?.product_id,
            sale_text: values.sale_text,
        }
        productUpdate.mutate(reqData)
    };

  return (
    <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={handleSubmit}
    >
        {(props) => (
            <Form>
                <div
                    className='flex flex-col w-full bg-white dark:bg-black-box text-black-body dark:text-white-body rounded-xl p-16 sm:px-20 sm:py-16 shadow'>
                    <div className='w-full flex flex-col gap-4'>
                        <div className='relative text-input flex flex-col sm:flex-row gap-2 sm:items-center'>
                            <label className={`text-base min-w-36 text-end sm:text-left ${(props.errors.details && props.touched.details) && 'text-red-500'}`}>
                                Details
                            </label>
                            <textarea
                                className='p-4 w-full resize-none border outline-none ring-0 dark:bg-transparent dark:border-white-light'
                                rows={4}
                                id='details'
                                placeholder='Enter your description text here ...'
                                name='details'
                                value={props.values.details}
                                onChange={props.handleChange}
                            />
                        </div>
                        <div className='relative text-input flex flex-col sm:flex-row gap-2 sm:items-center'>
                            <label className={`text-base min-w-36 text-end sm:text-left ${(props.errors.sale_text && props.touched.sale_text) && 'text-red-500'}`}>
                                Sales Text
                            </label>
                            <textarea
                                className='p-4 w-full resize-none border outline-none ring-0 dark:bg-transparent dark:border-white-light'
                                rows={4}
                                id='sale_text'
                                placeholder='Enter your description text here ...'
                                name='sale_text'
                                value={props.values.sale_text}
                                onChange={props.handleChange}
                            />
                        </div>

                        <div className='h-10 my-5 text-end'>
                            <button type='submit' disabled={productUpdate.isPending}
                                    className='px-4 h-full bg-primary text-white font-bold rounded-md'>{productUpdate.isPending ? 'loading...' : 'Update'}</button>
                        </div>

                        {productUpdate.error &&
                            <>
                                <div className="w-full text-center">
                                    <p className='text-red-500 text-sm'>{productUpdate.error.message}</p>
                                </div>
                            </>
                        }
                        {productUpdate.isSuccess &&
                            <>
                                <div className="w-full text-center">
                                    <p className='text-emerald-500 text-sm'>{'Product Details Updated'}</p>
                                </div>
                            </>
                        }
                    </div>
                </div>
            </Form>
        )}
    </Formik>
  )
}