'use client'
import { useDispatch, useSelector } from 'react-redux';
import { useQuery } from '@tanstack/react-query';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { AdminUserListAPI } from '@/Utils/APIRequest/Endpoints';
import { useTranslation } from '@/Utils/Hooks/useTranslate';
import AdminUserDetailsBox from '@/Component/Common/AdminUserDetailsBox';
import Loader from '@/Layout/Loader';
import { AppStore } from '@/lib/store';
import { useEffect } from 'react';
import { getInfluencerDetails, setLoading } from '@/lib/Features/InfluencerDataSlice/influencerDataSlice';

const AdminBrandDetail = (props) => {
    const { userSlug } = props;
    const { translations } = useTranslation();
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const dispatch = useDispatch();

    // Get API
    const { data: UserDetailData, isPending, refetch } = useQuery({ queryKey: [AdminUserListAPI, userSlug], queryFn: () => CustomFetch({ url: `${AdminUserListAPI}/${userSlug}` }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data?.data });

    useEffect(() => {
        if (isPending) {
            dispatch(setLoading(true));
        } else {
            dispatch(getInfluencerDetails(UserDetailData));
            dispatch(setLoading(false));
        }
    }, [UserDetailData, isPending]);

    if (isPending) {
        return <Loader />
    }

    return (
        <AdminUserDetailsBox UserDetailData={UserDetailData} translations={translations} userDetails={userDetails} refetch={refetch} />
    )
}

export default AdminBrandDetail