import React from 'react';
import { ListBase, MainColorType } from '@nova-hf/ui';
import ContractsHeader, { BoxItem } from 'beta/components/contracts-header/ContractsHeader';
import { formatDate, formatPrice } from 'beta/utils/helpers';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useContractSlotsQuery } from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

type BundleContainerHeaderProps = {
  category?: string;
  title?: string;
  contractName: string;
  contractId: string;
  contractCharge: number;
  contractPeriodEnd: string;
  color: MainColorType;
};

enum SlotType {
  mobile = 'Farsímar eða snjalltæki',
  internet = 'Ótakmarkað heimanet',
}

const BundleContainerHeader = ({
  category,
  title,
  contractName,
  contractId,
  contractCharge,
  contractPeriodEnd,
  color,
}: BundleContainerHeaderProps) => {
  const router = useRouter();
  const { t } = useTranslation('services');
  const customerId = router.query.customerId as string;
  const slotItems: BoxItem[] = [];
  const { data, error, loading } = useContractSlotsQuery({
    variables: {
      input: {
        contractId: contractId,
      },
    },
  });

  const contractSlots = data?.contractSlots;

  if (error) return null;
  if (loading || !contractSlots?.length) {
    return <ListBase isLoading />;
  }

  const getSlotItems = (offerName: SlotType, freeSlots: number) => {
    switch (offerName) {
      case SlotType.mobile:
        return {
          key: 1,
          title: t('subTitles.mobile'),
          value:
            freeSlots === 1
              ? t('alltsamanSlots.oneAvailable')
              : freeSlots
              ? `${freeSlots}` + t('alltsamanSlots.available')
              : t('alltsamanSlots.filled'),
          icon: 'mobileScreen',
        };
      case SlotType.internet:
        return {
          key: 2,
          title: t('subTitles.internet'),
          value: freeSlots
            ? `${freeSlots}` + t('alltsamanSlots.available')
            : t('alltsamanSlots.connected'),
          icon: 'wifi',
        };
      default:
        break;
    }
  };

  contractSlots
    ?.filter((slot) => slot?.offerName === SlotType.mobile || slot?.offerName === SlotType.internet)
    .map((slot) => {
      slotItems.push(getSlotItems(slot.offerName, slot.freeSlots));
    });

  if (contractPeriodEnd) {
    slotItems.push({
      key: 4,
      title: t('alltsamanSlots.nextPayment'),
      value: formatDate(contractPeriodEnd, 'dd.MM.yyyy'),
      icon: 'creditcard',
    });
  }
  if (contractCharge) {
    slotItems.push({
      key: 5,
      title: t('alltsamanSlots.amount'),
      value: formatPrice(contractCharge),
      icon: 'wallet',
    });
  }

  return (
    <ContractsHeader
      color={color}
      title={title ?? ''}
      pillText={title ? contractName : ''}
      items={slotItems}
      button={
        title
          ? {
              renderAs: 'a',
              text: category
                ? `Skoða ${category?.charAt(0).toUpperCase() + category?.slice(1)}`
                : 'Skoða',
              icon: 'longArrowRight',
              wrapper: (link) => (
                <Link href={`/beta/${customerId}/askriftir/${contractId}`} passHref legacyBehavior>
                  {link}
                </Link>
              ),
            }
          : undefined
      }
    ></ContractsHeader>
  );
};

export default BundleContainerHeader;