import React from 'react';
import { LoadingDots, Text, ThemeColorType } from '@nova-hf/ui';
import { ContractUsageInfo, ContractUsagePayload, useContractUsageQuery } from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

type ContractUsageProps = {
  contractId: string;
  serviceId: string;
  mainContractItemId: string;
  color: ThemeColorType;
};
export const ContractUsage = ({
  contractId,
  serviceId,
  mainContractItemId,
  color,
}: ContractUsageProps) => {
  const { t } = useTranslation('services');

  const {
    data: usageData,
    error,
    loading,
  } = useContractUsageQuery({
    variables: {
      input: {
        serviceId: serviceId,
        id: contractId,
      },
    },
    nextFetchPolicy: 'cache-and-network',
    notifyOnNetworkStatusChange: true,
  });

  if (loading)
    return (
      <Text variant="pXSmallBold" color={color}>
        <LoadingDots color={color} />
      </Text>
    );

  if (
    loading ||
    error ||
    !usageData?.contractUsage?.length ||
    !usageData.contractUsage[0]?.__typename ||
    usageData.contractUsage[0].__typename !== 'ContractUsagePayload'
  ) {
    return null;
  }

  const usageInfoArr = usageData.contractUsage as ContractUsagePayload[];
  const usage: ContractUsageInfo | undefined =
    usageInfoArr
      .find((usageInfo) => usageInfo.contractItemId === mainContractItemId)
      ?.usageInfo?.find((usageInfoItem) => usageInfoItem?.isPrimary === true) ?? undefined;

  return usage ? (
    <Text variant="pXSmallBold" color={color}>
      {usage?.infinite
        ? t('services.infinateUsage')
        : `${usage?.remaining?.amount} ${t('services.usageLeft')}`}
    </Text>
  ) : null;
};