import React from 'react';
import StickyBar from 'components/sticky-bar/StickyBar';
import { StickyItem } from 'components/sticky-bar/StickyItem';
import { useRouter } from 'next/router';
import { useTotalSummaryQuery } from 'typings/graphql';
import { formatPrice } from 'utils/helpers';
import { useTranslation } from 'utils/i18n';

type TotalSummaryProps = {
  color: string;
  date: Date;
};

const TotalSummary = ({ color, date }: TotalSummaryProps) => {
  const router = useRouter();
  const { t } = useTranslation('subscriptions');

  const { loading, data } = useTotalSummaryQuery({
    variables: {
      accountInput: { ssn: router?.query.ssn as string },
      summaryInput: { date },
    },
  });

  const totalSum = (data?.me?.summary?.totalSum ?? 0) + (data?.me?.summary?.totalForeignSum ?? 0);

  return (
    <StickyBar color={color}>
      <StickyItem color={color} subTitle={t('totalAmount')} subText={t('ofWhichAbroad')} />
      <StickyItem
        color={color}
        subTitle={loading ? '...' : formatPrice(totalSum || 0)}
        subText={loading ? '...' : formatPrice(data?.me?.summary?.totalForeignSum || 0)}
        alignRight
        textAlignRight
      />
    </StickyBar>
  );
};

export default TotalSummary;