'use client'
import { useEffect, useState } from 'react'
import dynamic from 'next/dynamic'
import { useDispatch } from 'react-redux'
import { setHeading } from '@/lib/Features/ThemeSlice/themeSlice'
import { useQuery } from '@tanstack/react-query'
import CustomFetch from '@/Utils/APIRequest/AxiosInstance'
import usePost from '@/Utils/Hooks/usePost'
import Loader from '@/Layout/Loader'
import { CustomToast } from '@/Utils/CustomToast'
import { LoaderSVG } from '@/Component/Common/SVGs/CommonSVG'
import GradientButton from '@/Component/Common/Forms/GradientButton'
import { PrivacyPolicyAPI } from '@/Utils/APIRequest/Endpoints'

const CustomCKEditor = dynamic(() => import('@/Component/Common/CustomCKEditor'), { ssr: false })

const AdminPrivacyPolicy = () => {
    const dispatch = useDispatch()
    const [privacyValue, setPrivacyValue] = useState(null)
    const { data, isPending, refetch } = useQuery({ queryKey: [PrivacyPolicyAPI], queryFn: () => CustomFetch({ url: PrivacyPolicyAPI }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data?.data });

    const { isPending: CreateLoader, mutate } = usePost(PrivacyPolicyAPI, null, (response) => {
        CustomToast("success", 'Privacy Policy Update Successfully')
        refetch()
    }, 'Put');

    useEffect(() => {
        dispatch(setHeading("Content Management"))
        setPrivacyValue(data?.description)
    }, [data])

    const handleSubmit = () => {
        if (privacyValue) {
            let obj: any = {
                title: data?.title ?? "",
                description: privacyValue
            }
            mutate(obj)
        }
    }

    if (isPending) return <Loader />
    return (
        <>
            {/* <h2 className='text-2xl font-semibold mb-4 capitalize'>{'Privacy Policy'}</h2> */}
            <CustomCKEditor values={privacyValue} customSetterFun={setPrivacyValue} placeholder='Enter privacy policy' />
            <GradientButton customClass="mt-4 flex items-center justify-center" buttonType='submit' onClick={handleSubmit} disabled={CreateLoader}>
                {'Save'} {CreateLoader && <LoaderSVG customClass='ml-[10px]' />}
            </GradientButton>
        </>
    )
}

export default AdminPrivacyPolicy