import React from 'react';
import { Grid, GridItem, IconCard, IconType } from '@nova-hf/ui';
import { parseBoxShadowColor, parseThemeColor } from 'beta/utils/typeGuards';
import Link from 'next/link';
import { useShortCutLinksQuery } from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

export const ShortCuts = () => {
  const { i18n } = useTranslation();

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

  if (error || loading) return null;

  return (
    <Grid gridTemplate={{ sm: 4, lg: 12 }} columnGap={{ sm: 1, lg: 2 }} rowGap={{ sm: 1, lg: 2 }}>
      {data?.linkList?.linksCollection?.items.map((link) => {
        if (link?.title && link.icon) {
          const themeColor = parseThemeColor((link.backgroundColor?.color as string) ?? '') ?? '';
          const boxShadow =
            parseBoxShadowColor((link.backgroundColor?.coloredShadow as string) ?? '') ?? '';
          const icon = link.icon as IconType;
          return (
            <GridItem key={link.title} gridColumn={{ sm: 'span2', lg: 'span3' }}>
              <IconCard
                renderAs="a"
                icon={icon}
                text={link.title.toUpperCase()}
                backgroundColor={themeColor}
                borderColor={themeColor}
                boxShadow={boxShadow}
                color="white"
                textColor="white"
                height="100%"
                openInNewTab={!!link.url}
                {...(!!link.url && { href: link.url })}
                {...(link.slug && {
                  linkWrapper: (child) => (
                    <Link href={link.slug ?? ''} passHref legacyBehavior>
                      {child}
                    </Link>
                  ),
                })}
              />
            </GridItem>
          );
        }
      })}
    </Grid>
  );
};