import { useEffect, useState } from "react"
import { CustomToast } from "@/Utils/CustomToast"
import usePost from "@/Utils/Hooks/usePost"
import ConfirmationModal from "../../Modal/ConfirmationModal"
import { isCategoryLocked } from "@/Component/Admin/AdminDiscovery/CampaignDiscovery/types"

const ActiveDeactiveStatus = (props: any) => {
    const { data, refetch, apiProps = {}, translations } = props

    const [status, setStatus] = useState<any>()
    const [modal, setModal] = useState<any>(null)

    useEffect(() => {
        setStatus(data?.is_active ? 'active' : 'inactive')
    }, [data])

    const onActiveDeActive = () => {
        setModal(data?.is_active ? 'active' : 'inactive')
    }
    const callbackFunction = () => {
        mutate()
    }

    // API POST
    const { isPending, mutate } = usePost(apiProps?.endpoint, apiProps?.path, (response) => {
        if (response.status == 200 || response.status == 201) {
            CustomToast("success", 'Status changed successfully')
            refetch()
            setStatus(modal?.status)
            setModal(null)
        }
    }, 'patch')

    return (
        <>
            <td className="px-5 py-4">
                <div className="flex items-center gap-2">
                    <label className='relative inline-flex items-center'>
                        <input
                            type='checkbox'
                            checked={data?.is_active}
                            onChange={onActiveDeActive}
                            className='sr-only peer disabled:pointer-events-none disabled:opacity-50'
                            disabled={isCategoryLocked(data)}
                        />
                        <div className="w-9 h-5 bg-neutral-200 cursor-pointer rounded-full peer-checked:bg-gradient-to-br from-primary to-accent peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-4 after:w-4 after:shadow-soft after:transition-all peer-disabled:pointer-events-none peer-disabled:opacity-50"></div>
                    </label>
                    <span className={`text-xs font-medium ${data?.is_active ? "text-success" : "text-neutral-400"}`}>{data?.is_active ? 'Active' : 'Inactive'}</span>
                </div>
            </td>
            {modal && <ConfirmationModal loader={isPending} modal={modal} args={{ message: data?.is_active ? "Are you sure you want to change status to inactive?" : "Are you sure you want to change status to active?" }} setModal={setModal} callbackFunction={callbackFunction} translations={translations} />}
        </>
    )
}

export default ActiveDeactiveStatus