import React from 'react';
import { useRouter } from 'next/router';
import { Grid, GridItem, LinkCard, Text } from '@nova-hf/ui';
import { useTranslation } from 'utils/i18n';
import { useContractGroupsQuery, useForYouItemsQuery } from 'typings/graphql';
import { AccordionItems } from 'beta/components/accordion-items/AccordionItems';

const DEFAULT_ITEM_COUNT = 2;

type OpportunitiesProps = {
  isAccordion: boolean;
};

export const Opportunities = ({ isAccordion }: OpportunitiesProps) => {
  const { t, i18n } = useTranslation('containers');
  const router = useRouter();
  const customerId: string = (router.query.customerId as string) ?? '';

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

  const { data, loading, error } = useForYouItemsQuery({
    variables: {
      locale: i18n.language,
    },
  });

  if (error || loading || contractsLoading || !data?.forYouItemCollection?.items.length)
    return null;

  const forYouItemsWithoutCategoryIds = data.forYouItemCollection.items.filter((forYouItem) => {
    return contractsData?.contractGroups?.length && !contractsError
      ? contractsData.contractGroups.every((contract) => {
          if (contract?.categoryId)
            return contract?.categoryId?.toLowerCase() !== forYouItem?.categoryId?.toLowerCase();
          else return forYouItem;
        })
      : forYouItem;
  });

  const sortedForYouItemsWithoutTags = forYouItemsWithoutCategoryIds
    .filter((item) => !item?.tags)
    .sort((a, b) => {
      const aOrder = a?.order ?? 0;
      const bOrder = b?.order ?? 0;
      return aOrder - bOrder;
    });

  return (
    <>
      {isAccordion ? (
        <AccordionItems
          sectionTitle={t('yfirlitOpportunities.oportunitySectionTitle')}
          expandButtonText={t('yfirlitOpportunities.expandButtonText')}
          closeButtonText={t('yfirlitOpportunities.closeButtonText')}
          itemsShownByDefault={sortedForYouItemsWithoutTags
            .slice(0, DEFAULT_ITEM_COUNT)
            .map((item) => {
              const tag = item?.tags?.length && item.tags[0] ? item.tags[0] : '';
              return (
                <LinkCard
                  key={item?.title}
                  highlight={tag}
                  image={{
                    alt: item?.image?.title ?? 'image',
                    url: item?.image?.url ?? '',
                  }}
                  button={{
                    colorScheme: 'pink',
                    icon: 'longArrowRight',
                    text: t('yfirlitOpportunities.oportunityCardText'),
                    renderAs: 'a',
                    href: item?.link ?? '',
                    openInNewTab: true,
                  }}
                  title={item?.title ?? ''}
                  boxShadow="none"
                  dottedShadow="none"
                />
              );
            })}
          restOfItems={sortedForYouItemsWithoutTags.slice(DEFAULT_ITEM_COUNT).map((item) => {
            const tag = item?.tags?.length && item.tags[0] ? item.tags[0] : '';
            return (
              <LinkCard
                key={item?.title}
                highlight={tag}
                image={{
                  alt: item?.image?.title ?? 'image',
                  url: item?.image?.url ?? '',
                }}
                button={{
                  colorScheme: 'pink',
                  icon: 'longArrowRight',
                  text: t('yfirlitOpportunities.oportunityCardText'),
                  renderAs: 'a',
                  href: item?.link ?? '',
                  openInNewTab: true,
                }}
                title={item?.title ?? ''}
                boxShadow="none"
                dottedShadow="none"
              />
            );
          })}
        />
      ) : (
        <>
          <Text variant="h6" marginBottom={4}>
            {t('yfirlitOpportunities.oportunitySectionTitle')}
          </Text>
          <Grid gridTemplate={{ sm: 4, md: 12 }}>
            {sortedForYouItemsWithoutTags.map((item, i) => {
              const tag = item?.tags?.length && item.tags[0] ? item.tags[0] : '';

              return (
                <GridItem
                  key={i}
                  gridColumn={{
                    sm: 'span4',
                  }}
                >
                  <LinkCard
                    key={item?.title}
                    highlight={tag}
                    image={{
                      alt: item?.image?.title ?? 'image',
                      url: item?.image?.url ?? '',
                    }}
                    button={{
                      colorScheme: 'pink',
                      icon: 'longArrowRight',
                      text: t('yfirlitOpportunities.oportunityCardText'),
                      renderAs: 'a',
                      href: item?.link ?? '',
                      openInNewTab: true,
                    }}
                    title={item?.title ?? ''}
                    boxShadow="none"
                    dottedShadow="none"
                  />
                </GridItem>
              );
            })}
          </Grid>
        </>
      )}
    </>
  );
};