import { useQuery } from '@apollo/client';
import { BILLING_SCREEN_PROPS } from 'components/billing/schema/queries';
import {
  BillingScreenPropsQuery,
  BillingScreenPropsQueryVariables,
} from 'types/graphql';

import { Box, Spinner } from 'components/common';
import { ErrorBoundary } from 'components/ErrorBoundary';

import { PaymentMethods } from './PaymentMethods';
import { Invoices } from './Invoices';
import { CurrentPackage } from './CurrentPackage';
import { BillingInformationClean } from './BillingInformationClean';

export const BillingScreen = () => {
  const { data, loading, error } = useQuery<
    BillingScreenPropsQuery,
    BillingScreenPropsQueryVariables
  >(BILLING_SCREEN_PROPS, {
    fetchPolicy: 'cache-and-network',
    nextFetchPolicy: 'cache-first',
  });

  if (loading && data === undefined) return <Spinner show />;
  if (error || !data) return <div>Something went wrong</div>;

  return (
    <Box spacingY={10}>
      <ErrorBoundary>
        <CurrentPackage data={data.currentPackage} />
      </ErrorBoundary>

      <ErrorBoundary>
        <PaymentMethods data={data.paymentMethod} />
      </ErrorBoundary>

      <ErrorBoundary>
        <BillingInformationClean data={data.billingDetails} />
      </ErrorBoundary>

      <ErrorBoundary>
        <Invoices data={data.invoices} />
      </ErrorBoundary>

      <Spinner show={loading} />
    </Box>
  );
};