import React, { ReactNode } from 'react';
import { Box, MainButton, SecondaryButton, Text, ThemeColorType } from '@nova-hf/ui';
import { formatPrice } from 'beta/utils/helpers';
import { useTranslation } from 'beta/utils/i18n';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { ContractStatus, useContractsQuery } from 'typings/graphql';

type ServiceContractDisplayProps = {
  serviceId: string;
  color: ThemeColorType;
};

const ServiceContractDisplay = ({ serviceId, color }: ServiceContractDisplayProps) => {
  const { query } = useRouter();
  const customerId = typeof query?.customerId === 'string' ? query?.customerId : '';

  const { t } = useTranslation('fiber');
  const { data, loading, error } = useContractsQuery({
    variables: {
      input: {
        serviceId,
        customerId,
      },
    },
    skip: !serviceId || !customerId,
  });

  if (loading) return <Box>{t('betaAccordion.contractLoading')}</Box>;
  if (error || !data?.contracts.contracts)
    return <Box> {t('betaAccordion.contractNotFound')} </Box>;

  const contract = data?.contracts.contracts.find(
    (contract) =>
      contract.status === ContractStatus.Active || contract.status === ContractStatus.Pending,
  );
  const variant = contract?.variant;
  const isAlltSaman = contract?.variant?.id?.includes('allt');

  if (
    variant?.__typename !== 'SubscriptionVariant' &&
    variant?.__typename !== 'ProvisionedSubscriptionVariant'
  )
    return (
      <Box paddingX={9}>
        <Text variant="pLargeBold" color="black100" marginBottom={3}>
          {t('betaAccordion.wrongVariant')}
        </Text>
      </Box>
    );
  return (
    <Box paddingX={9} display="flex" flexDirection="column" gap={3}>
      <Box>
        <Text variant="eyebrowMedium">{t('betaAccordion.pack')}</Text>
        <Text variant="pMediumRegular">{contract?.productDescription}</Text>
      </Box>
      <Box>
        <Text variant="eyebrowMedium">{t('betaAccordion.description')}</Text>
        <Text variant="pMediumRegular">{variant?.description}</Text>
      </Box>
      {!!variant?.monthlyCharge && (
        <Box borderWidth="1px" borderColor="grey200" borderBottomStyle="solid">
          <Text variant="eyebrowMedium">{t('betaAccordion.price')}</Text>
          <Box marginBottom={2}>
            <Text variant="pMediumRegular">
              {`${formatPrice(variant?.monthlyCharge)} ${t('betaAccordion.unit')}`}
            </Text>
          </Box>
        </Box>
      )}
      {!isAlltSaman && (
        <Box>
          <Text variant="eyebrowMedium">{t('betaAccordion.contract')}</Text>
          <SecondaryButton
            colorScheme="purple"
            icon="search"
            text={t('betaAccordion.look')}
            renderAs="a"
            wrapper={(link) => (
              <Link passHref href={`/beta/${customerId}/askriftir/${contract?.id}`}>
                {link}
              </Link>
            )}
          />
        </Box>
      )}
      <Box
        display="flex"
        flexDirection={{ sm: 'column', xl: 'row' }}
        marginBottom={4}
        alignItems={{ sm: 'flex-start', xl: 'center' }}
        justifyContent={{ sm: 'flex-start', xl: 'space-between' }}
      >
        <Text variant="pMediumBold">{t('betaAccordion.change')}</Text>
        <Box width={{ sm: '8/12', xl: '4/12' }}>
          <MainButton
            colorScheme={color}
            text={t('betaAccordion.buttonChange')}
            dottedShadow="none"
            icon="longArrowRight"
            renderAs="a"
            openInNewTab={true}
            wrapper={(link: ReactNode) => (
              <Link
                href={{
                  pathname: '/beta/[customerId]/thjonustur/[serviceId]/thjonustubreyting',
                  query: { customerId: query.customerId, serviceId: query.serviceId },
                }}
                legacyBehavior
              >
                {link}
              </Link>
            )}
          />
        </Box>
      </Box>
    </Box>
  );
};

export default ServiceContractDisplay;