import React from 'react';
import { Footer, IconType } from '@nova-hf/ui';
import { useFooterQuery } from '../../../typings/graphql';
import { AwardsAndSocial, IconLink, LinkBase } from '@nova-hf/ui/umd/ts/src/footer/Footer';

export const FooterContainer = () => {
  const { data, loading, error } = useFooterQuery();

  if (error) return null;
  if (loading) return <Footer discoBallLink={{ text: 'Komdu...' }} />;

  const footer = data?.footer;
  const discoballLink: LinkBase = {
    text: footer?.discoBallLink?.title ?? '',
    href: footer?.discoBallLink?.url ?? undefined,
  };

  const awardsAndSocial: AwardsAndSocial = {
    logo: { href: 'www.nova.is', logo: 'main' },
    awards: footer?.awardsCollection?.items[0]?.linksCollection?.items.map((awardItem) => ({
      href: awardItem?.url ?? undefined,
      src: awardItem?.image?.url ?? undefined,
      text: awardItem?.image?.title ?? '',
    })),
    socialTitle: footer?.socialLinksCollection?.items[0]?.title ?? undefined,
    socialLinks: footer?.socialLinksCollection?.items[0]?.linksCollection?.items.map(
      (socialLink) => ({
        href: socialLink?.url ?? '',
        icon: (socialLink?.icon as IconType | undefined | null) ?? 'add',
        text: socialLink?.title ?? '',
      }),
    ),
  };

  const navigationLinks: Array<{ sectionLink?: LinkBase; links: Array<LinkBase> }> | undefined =
    footer?.navigationLinksCollection?.items.map((linkSection) => ({
      sectionLink: {
        text: linkSection?.mainLink?.title ?? '',
        href: linkSection?.mainLink?.url ?? undefined,
      },
      links:
        linkSection?.linksCollection?.items.map((link) => ({
          href: link?.url ?? undefined,
          text: link?.title ?? '',
        })) ?? [],
    }));

  const mobileNavigationLinks:
    | Array<{ sectionLink?: LinkBase; links: Array<LinkBase> }>
    | undefined = footer?.mobileNavigationsLinksCollection?.items.map((linkSection) => ({
    links:
      linkSection?.linksCollection?.items.map((link) => ({
        href: link?.url ?? undefined,
        text: link?.title ?? '',
      })) ?? [],
  }));

  const shortCutLinks: Array<IconLink> | undefined = footer?.shortcutLinksCollection?.items.map(
    (shortCutLink) => ({
      text: shortCutLink?.title ?? '',
      href: shortCutLink?.url ?? undefined,
      icon: (shortCutLink?.icon as IconType | undefined | null) ?? undefined,
    }),
  );

  const supportLinks: Array<LinkBase> | undefined = footer?.supportLinksCollection?.items.map(
    (supportLink) => ({
      text: supportLink?.title ?? undefined,
      href: supportLink?.url ?? undefined,
    }),
  );

  return (
    <Footer
      discoBallLink={discoballLink}
      awardsAndSocial={awardsAndSocial}
      navigationLinks={navigationLinks}
      mobileNavigationLinks={mobileNavigationLinks}
      shortCutLinks={shortCutLinks}
      supportLinks={supportLinks}
    />
  );
};