import React, { Fragment } from 'react';
import { Box, ListBase } from '@nova-hf/ui';
import { useRouter } from 'next/router';
import { PlanType, useContractsQuery, Contract } from 'typings/graphql';
import BundleContainerHeader from './BundleContainerHeader';
import BundleContainerList from './BundleContainerList';
import { useTranslation } from 'beta/utils/i18n';
import ContractsHeader from '../../components/contracts-header/ContractsHeader';
import { ErrorBanner } from '../../components/error/ErrorBanner';
import { NetworkStatus } from '@apollo/client';

type ContractsContainerProps = {
  category: string;
  title: string;
};

const COLOR = 'orange';

const BundleContainer = ({ category, title }: ContractsContainerProps) => {
  const { t } = useTranslation(['alltSaman', 'errors']);
  const router = useRouter();
  const customerId = router?.query?.customerId?.toString() ?? '';

  const { data, loading, error, networkStatus, refetch } = useContractsQuery({
    variables: {
      input: {
        customerId,
        category,
      },
    },
  });

  const contracts = data?.contracts.contracts;
  const pillText = (contract: Contract) => {
    if (contract?.variant?.__typename === 'SubscriptionVariant') {
      if (contract?.variant?.planType === PlanType.Postpaid) {
        return t('alltSaman.postPaid');
      }
      if (contract?.variant?.planType === PlanType.Prepaid) {
        return t('alltSaman.prePaid');
      }
    }
    return '';
  };

  if (loading || error) {
    return (
      <>
        {loading && <ContractsHeader title={t('alltSaman.loadingTitle')} />}
        <ErrorBanner
          eyebrowTexts={[
            t('errors:thjonustur.eyebrows.1'),
            t('errors:thjonustur.eyebrows.2'),
            t('errors:thjonustur.eyebrows.3'),
          ]}
          titles={[
            t('errors:thjonustur.titles.1'),
            t('errors:thjonustur.titles.2'),
            t('errors:thjonustur.titles.3'),
          ]}
          descriptions={[
            t('errors:thjonustur.descriptions.1'),
            t('errors:thjonustur.descriptions.2'),
            t('errors:thjonustur.descriptions.3'),
          ]}
          icon="zap"
          color="attention"
          showLoading={loading || networkStatus === NetworkStatus.refetch}
          refetchButton={{
            text: t('errors:buttons.refresh'),
            icon: 'refresh',
            onClick: () => refetch(),
          }}
          loadingComponent={
            <>
              <ListBase isLoading gap={3} />
              <ListBase isLoading gap={3} />
              <ListBase isLoading />
            </>
          }
        />
      </>
    );
  }
  if (!contracts || contracts?.length < 1) {
    return null;
  }

  return (
    <Box marginBottom={5}>
      {contracts?.map((contract) => {
        const { contractItems, variant } = contract;

        if (variant?.__typename !== 'SubscriptionVariant' && contract) {
          return;
        }

        return (
          <Fragment key={contract?.id}>
            <Box marginBottom={5}>
              <BundleContainerHeader
                category={category}
                title={title}
                contractName={contract?.variant?.name ?? ''}
                contractId={contract.id}
                contractCharge={contract?.variant?.monthlyCharge ?? 0}
                contractPeriodEnd={contract.latestPeriodEnd ?? ''}
                color={COLOR}
              />
              <Box marginBottom={2} display="flex" flexDirection="column">
                <BundleContainerList
                  contractItems={contractItems}
                  payerName={contract?.payerName ?? ''}
                  color={COLOR}
                  pillText={pillText(contract)}
                  hasCheckmark
                />
              </Box>
            </Box>
          </Fragment>
        );
      })}
    </Box>
  );
};

export default BundleContainer;