import SkeletonLoader from "@/Layout/SkeletonLoader";
import CustomFetch from "@/Utils/APIRequest/AxiosInstance";
import { BrandPaymentStatsAPI, InfluencerPaymentStatsAPI } from "@/Utils/APIRequest/Endpoints";
import { formatNumber } from "@/Utils/Other/FormateNumbers";
import { formatNumberWithCommas } from "@/Utils/Other/FormatNumberWithCommas";
import { useQuery } from "@tanstack/react-query";

const PaymentStrip = (props) => {
  const { userDetails, translations } = props;
  const APIEndPoint = userDetails?.role == "brand" ? BrandPaymentStatsAPI : InfluencerPaymentStatsAPI

  // GET API
  const { data, fetchStatus, isPending } = useQuery({ queryKey: [APIEndPoint], queryFn: () => CustomFetch({ url: APIEndPoint }, null, false), refetchOnWindowFocus: false, enabled: !!userDetails, select: (data) => data?.data?.paymentStatistics });

  return (
    <>
      {fetchStatus === 'fetching' || isPending ?
        <div className="md:mb-7 mb-4">
          <SkeletonLoader width="100%" height={84} />
        </div> :
        userDetails?.role == 'influencer' ?
          <div className="bg-gradient-to-br from-secondary to-primary rounded-lg md:p-5 p-3 grid md:grid-cols-4 grid-cols-2 gap-3 md:divide-x divide-white text-white md:mb-7 mb-4">
            <div className="flex flex-col">
              <span className="font-semibold">${formatNumberWithCommas(data?.totalamount)} USD</span>
              <label className="text-xs">{translations?.totalAmount}</label>
            </div>
            <div className="flex flex-col md:pl-5">
              <span className="font-semibold">${formatNumberWithCommas(data?.paidamount)} USD</span>
              <label className="text-xs">{translations?.paid}</label>
            </div>
            <div className="flex flex-col md:pl-5">
              <span className="font-semibold">${formatNumberWithCommas(data?.remainingamount)} USD</span>
              <label className="text-xs">{translations?.remaining}</label>
            </div>
            <div className="flex flex-col md:pl-5">
              <span className="font-semibold">{data?.totaljobs}</span>
              <label className="text-xs">{translations?.totalJobs}</label>
            </div>
          </div>
          :
          <div className="bg-gradient-to-br from-secondary to-primary rounded-lg md:p-5 p-3 grid md:grid-cols-5 grid-cols-2 gap-3 md:divide-x divide-white text-white md:mb-7 mb-4">
            <div className="flex flex-col">
              <span className="font-semibold">${formatNumberWithCommas(data?.totalamount)} USD</span>
              <label className="text-xs">{translations?.totalAmount}</label>
            </div>
            <div className="flex flex-col md:pl-5">
              <span className="font-semibold">${formatNumberWithCommas(data?.paidamount)} USD</span>
              <label className="text-xs">{translations?.paid}</label>
            </div>
            <div className="flex flex-col md:pl-5">
              <span className="font-semibold">${formatNumberWithCommas(data?.remainingamount)} USD</span>
              <label className="text-xs">{translations?.remaining}</label>
            </div>
            <div className="flex flex-col md:pl-5">
              <span className="font-semibold">{data?.totalinfluencer}</span>
              <label className="text-xs">{translations?.totalInfluencer}</label>
            </div>
            <div className="flex flex-col md:pl-5">
              <span className="font-semibold">{data?.totalcampaigns}</span>
              <label className="text-xs">{translations?.totalCampaigns}</label>
            </div>
          </div>
      }
    </>
  )
}

export default PaymentStrip