import React from 'react';
import { Box, ProductOverview, SecondaryButton, Text } from '@nova-hf/ui';
import { ListLoader } from 'beta/components/loading-placeohlders/ListLoader';
import { Filters } from 'beta/pages/thjonustur';
import { parseIcon, parseThemeColor } from 'beta/utils/typeGuards';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useContractGroupsQuery } from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

type CategoryDetails = {
  detailTextSingular: string;
  detailtextPlural: string;
  icon: string;
  slug: string;
};

const routeToFilteredServices = (customerId: string, filterBy: Filters) =>
  `/beta/${customerId}/thjonustur?filterBy=${filterBy}`;

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

  const { data, loading, error } = useContractGroupsQuery({
    variables: {
      input: {
        customerId,
      },
    },
  });

  const mapContractCategory: Record<Exclude<Filters, 'all'>, CategoryDetails> = {
    farsimi: {
      detailTextSingular: t('servicesOverview.mobileSingular'),
      detailtextPlural: t('servicesOverview.mobilePlural'),
      icon: 'mobile',
      slug: routeToFilteredServices(customerId, 'farsimi'),
    },
    alltsaman: {
      detailTextSingular: t('servicesOverview.subscriptionSingular'),
      detailtextPlural: t('servicesOverview.subscriptionPlural'),
      icon: 'alltSaman',
      slug: routeToFilteredServices(customerId, 'alltsaman'),
    },
    novatv: {
      detailTextSingular: t('servicesOverview.subscriptionSingular'),
      detailtextPlural: t('servicesOverview.subscriptionPlural'),
      icon: 'tv',
      slug: routeToFilteredServices(customerId, 'novatv'),
    },
    netid: {
      detailTextSingular: t('servicesOverview.connectionSingular'),
      detailtextPlural: t('servicesOverview.connectionPlural'),
      icon: 'internet',
      slug: routeToFilteredServices(customerId, 'netid'),
    },
    '4g/5gnet': {
      detailTextSingular: t('servicesOverview.connectionSingular'),
      detailtextPlural: t('servicesOverview.connectionPlural'),
      icon: 'internet',
      slug: routeToFilteredServices(customerId, '4g/5gnet'),
    },
  };

  if (loading) return <ListLoader />;

  if (error || !data?.contractGroups?.length) return null;

  return (
    <>
      <Box display="flex" width="100%" justifyContent="space-between" alignItems="center">
        <Text variant="h6" marginBottom={4}>
          {t('servicesOverview.title')}
        </Text>
        <SecondaryButton
          text={t('servicesOverview.seeAllButton')}
          renderAs="a"
          icon="longArrowRight"
          wrapper={(children) => (
            <Link href={routeToFilteredServices(customerId, 'all')} passHref legacyBehavior>
              {children}
            </Link>
          )}
        />
      </Box>

      <Box display="flex" flexDirection="column" gap={3}>
        {data?.contractGroups?.map((contract) => {
          if (contract && contract.categoryName && contract.categoryId) {
            const icon: string = mapContractCategory[contract?.categoryId]?.icon ?? '';
            const categoryDetails: CategoryDetails =
              mapContractCategory[contract.categoryId.toLowerCase()];
            return (
              <ProductOverview
                key={contract.categoryName}
                color={parseThemeColor((contract.brandColor as string) ?? '', 'pink')}
                icon={parseIcon(icon, 'novaLogo')}
                eyebrow={contract.categoryName}
                title={`${contract.contractCount} ${
                  !!contract?.contractCount && contract.contractCount > 1
                    ? categoryDetails.detailtextPlural
                    : categoryDetails.detailTextSingular
                }`}
                renderAs="a"
                listButton={{ renderAs: 'div', text: 'Skoða', icon: 'longArrowRight' }}
                wrapper={(children) => (
                  <Link href={categoryDetails.slug} legacyBehavior>
                    {children}
                  </Link>
                )}
              />
            );
          }
        })}
      </Box>
    </>
  );
};