import React, { useEffect } from 'react';
import { IContext } from 'beta/typings/context';
import { Box, Grid, GridItem, ListCard, LoadingIcon, SecondaryButton, Text } from '@nova-hf/ui';
import { useRouter } from 'next/router';
import { ServiceType, useContractsQuery } from 'typings/graphql';
import { useTranslation } from 'utils/i18n';
import { formatPrice, serviceColorMap, serviceIconMap } from 'beta/utils/helpers';

export const Thjonustur = () => {
  const { t } = useTranslation('stillingar');
  const router = useRouter();
  const { query } = useRouter();
  const paymentMethodId: string = (query.paymentMethodId as string) ?? '';
  const customerId: string = (query.customerId as string) ?? '';

  const {
    data: contractData,
    loading,
    error,
    refetch: contractsRefetch,
  } = useContractsQuery({
    variables: {
      input: {
        customerId: customerId,
        page: 1,
        perPage: 50,
      },
    },
  });

  const contracts = contractData?.contracts?.contracts;

  const paymentMethodContracts = contracts?.filter((c) => c?.paymentMethod?.id === paymentMethodId);

  useEffect(() => {
    contractsRefetch();
  }, []);

  if (!contracts || loading) {
    return (
      <Box display="flex" alignItems="center" justifyContent="center">
        <LoadingIcon color="purple" size={80} />
      </Box>
    );
  }

  if (error) {
    return null;
  }

  return (
    <Box marginY={9}>
      <Grid gridTemplate={12} rowGap={2}>
        <GridItem gridColumn={{ sm: 'span12' }}>
          <Box
            paddingBottom={4}
            display="flex"
            flexDirection={{ sm: 'column', md: 'row' }}
            justifyContent="flex-end"
          >
            <SecondaryButton
              icon="add"
              text={t('service.linkSubscription')}
              onClick={() =>
                router.push(`/beta/${customerId}/greidslumati/${paymentMethodId}/tengja`)
              }
            />
          </Box>
        </GridItem>
        {paymentMethodContracts?.map((contract) => {
          return (
            <GridItem key={contract.id} gridColumn={{ sm: 'span12' }}>
              <ListCard
                icon={serviceIconMap(
                  contract?.contractItems[0]?.service?.type ?? ('Unknown' as ServiceType),
                )}
                color={serviceColorMap(
                  contract?.contractItems[0]?.service?.type ?? ('Unknown' as ServiceType),
                )}
                hasBorder={true}
                button={{
                  icon: 'longArrowRight',
                  text: 'Skoða',
                  onClick: () =>
                    router.push(
                      `/beta/${customerId}/thjonustur/${
                        contract?.contractItems[0]?.service?.id ?? ''
                      }`,
                    ),
                }}
              >
                <Box>
                  <Text variant="pMediumBold">{contract.payerName}</Text>
                </Box>
                <Box>
                  <Text
                    color={serviceColorMap(
                      contract?.contractItems[0]?.service?.type ?? ('Unknown' as ServiceType),
                    )}
                    variant="pMediumBold"
                  >
                    {contract.productDescription ?? ''}
                  </Text>
                  <Text variant="pSmallRegular">{contract.variant?.name ?? ''}</Text>
                </Box>
                <Box>
                  <Text variant="pMediumBold">
                    {formatPrice(
                      contract?.variant?.monthlyCharge ? contract.variant.monthlyCharge : 0,
                    )}
                  </Text>
                  <Text variant="pSmallRegular">á mán</Text>
                </Box>
              </ListCard>
            </GridItem>
          );
        })}
      </Grid>
    </Box>
  );
};

Thjonustur.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    customerId: query.customerId,
    namespacesRequired: ['stillingar'],
  };
};