'use client'
import { useState } from 'react'
import { useSelector } from 'react-redux'
import { useQuery } from '@tanstack/react-query'
import { AppStore } from '@/lib/store'
import CustomFetch from '@/Utils/APIRequest/AxiosInstance'
import { NotificationPreferencesAPI } from '@/Utils/APIRequest/Endpoints'
import { useTranslation } from '@/Utils/Hooks/useTranslate'
import Loader from '@/Layout/Loader'
import WhatsAppStripe from '@/Component/Dashboard/WhatsAppStripe'
import NotificationToggleItem from './NotificationToggleItem'

const NotificationPreferences = () => {
    const { translations } = useTranslation()
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails)

    const { data: preferencesData, isPending, refetch } = useQuery({
        queryKey: [NotificationPreferencesAPI],
        queryFn: () => CustomFetch({ url: NotificationPreferencesAPI }, null, false),
        refetchOnWindowFocus: false,
        select: (data) => data?.data
    })

    if (isPending) {
        return <Loader />
    }

    return (
        <>
            <h2 className="text-primary text-xl mb-7 font-medium leading-6">🔔 {translations?.notificationPreferences}</h2>

            {!userDetails?.is_whatsapp_verified && (
                <WhatsAppStripe
                    userDetails={userDetails}
                    translations={translations}
                    alwaysShow
                    hideDismissButton
                />
            )}

            <div className="mt-2">
                {preferencesData?.length > 0 ? (
                    <div className="flex flex-col divide-y divide-lightGray">
                        {preferencesData?.map((preference: any) => (
                            <NotificationToggleItem
                                key={preference.id}
                                preference={preference}
                                refetch={refetch}
                            />
                        ))}
                    </div>
                ) : (
                    <p className="text-gray text-center py-8">{translations?.noNotificationPreferencesFound}</p>
                )}
            </div>
        </>
    )
}

export default NotificationPreferences