import React from 'react';
import { Box, Text, ThemeColorType } from '@nova-hf/ui';
import { formatPrice } from 'beta/utils/helpers';
import { useCurrentPeriodTotalChargeQuery, useRemainingGbQuery } from 'typings/graphql';

type ContractExtraInfoProps = {
  contractId: string;
  color: ThemeColorType;
  info: string;
};

const ContractExtraInfo = ({ contractId, color, info }: ContractExtraInfoProps) => {
  const { data: periodData } = useCurrentPeriodTotalChargeQuery({
    variables: {
      input: {
        id: contractId,
      },
    },
    skip: !contractId,
  });

  const { data: usageData, error: usageError } = useRemainingGbQuery({
    variables: {
      input: {
        id: contractId,
      },
    },
    skip: !contractId,
  });

  const monthlyCharge = periodData?.currentPeriod?.totalCharge;
  const usageInfo = usageData?.contractUsage?.find((item) => item?.variantId?.includes('ljos'));
  const used = usageInfo?.usageCounters?.[0]?.used?.quantity;

  if (info === 'charge' && monthlyCharge) {
    return (
      <Box display="flex" alignItems="center" flexDirection="row">
        <Text variant="pMediumBold">{formatPrice(monthlyCharge)}</Text>
        <Text>/mán</Text>
      </Box>
    );
  }

  if (info === 'charge' && !monthlyCharge) {
    return (
      <Box display="flex" alignItems="center" flexDirection="row">
        <Text variant="pMediumBold">{formatPrice(0)}</Text>
        <Text>/mán</Text>
      </Box>
    );
  }

  if (info === 'usage' && used) {
    return (
      <Text variant="pMediumBold" color={color}>
        {`${used.toFixed(0)} GB notuð`}
      </Text>
    );
  }

  if (info === 'usage' && (!usageData || usageError || !used)) {
    return (
      <Text variant="pMediumBold" color={color}>
        Mánaðarleg
      </Text>
    );
  }

  return null;
};

export default ContractExtraInfo;