'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 AdminInfluencerDetail = (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 } = 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} />
  )
}

export default AdminInfluencerDetail