import React, { useEffect, useState } from 'react';
import {
  Contact,
  ContainerDeprecated,
  FooterColumn,
  FooterDeprecated as Footer,
  FooterGroup,
  FooterIcon,
  FooterLink,
  MobileFooter,
  MoreLinks,
  Tree,
} from '@nova-hf/ui';
import NovaLogo from 'assets/svg/nova-logo-tagline.svg';
import Refill from 'assets/svg/refill.svg';
import Facebook from 'assets/svg/social/facebook.svg';
import Instagram from 'assets/svg/social/instagram.svg';
import Snapchat from 'assets/svg/social/snapchat.svg';
import Twitter from 'assets/svg/social/twitter.svg';
import YouTube from 'assets/svg/social/youtube.svg';
import TwoForOne from 'assets/svg/twoFone.svg';
import User from 'assets/svg/user.svg';
import LinkWrapper from 'components/link-wrapper/LinkWrapper';
import { inject, observer } from 'mobx-react';
import { NextRouter, withRouter } from 'next/router';
import Authentication from 'store/authentication';
import UI from 'store/ui';
import { getLinks } from 'utils/links';

interface IFooterProps {
  router: NextRouter;
  noContent?: boolean;
  hideMainLinks?: boolean;
  className?: string;
  treeClassName?: string;
  isAbsolute?: boolean;
  noBackground?: boolean;
  color?: string;
  ui?: UI;
  authentication?: Authentication;
}

const FooterContainer = (props: IFooterProps) => {
  const { noContent, treeClassName, isAbsolute, color, noBackground, ui, authentication } = props;

  const [isStaff, setIsStaff] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
  const [isReady, setIsReady] = useState(false);

  const {
    social,
    farsimi,
    netid,
    barinn,
    more,
    baksvids,
    footerheadings,
    novatv,
    vip,
    skilmalar,
    allt,
  } = getLinks(isStaff);

  useEffect(() => {
    setIsStaff(!!authentication?.isStaff);
    setIsMobile(!!ui?.isMobile);
    setIsReady(true);
  }, []);

  const openContact = () => {
    ui?.setIsContactMenuOpen(true);
  };

  if (isMobile && isReady) {
    return (
      <MobileFooter {...props} color={color}>
        <Tree className={treeClassName}>
          <FooterColumn id="footer-mobile-col-1">
            <FooterLink linkComponent={<LinkWrapper newTab href={more.afgreidslutimar.link} />}>
              {more.afgreidslutimar.name}
            </FooterLink>
            <FooterLink linkComponent={<LinkWrapper newTab href={farsimi.thjonustusvaedi.link} />}>
              {farsimi.thjonustusvaedi.name}
            </FooterLink>
            <FooterLink linkComponent={<LinkWrapper newTab href={more.tonar.link} />}>
              {more.tonar.name}
            </FooterLink>
          </FooterColumn>

          <FooterColumn id="footer-mobile-col-2">
            <FooterLink linkComponent={<LinkWrapper newTab href={more.dansgolfid.link} />}>
              {more.dansgolfid.name}
            </FooterLink>
            <FooterLink linkComponent={<LinkWrapper newTab href={more.baksvids.link} />}>
              {more.baksvids.name}
            </FooterLink>
            <FooterLink onClick={() => openContact()}>{baksvids.hafasamband.name}</FooterLink>
          </FooterColumn>
        </Tree>

        <Contact
          disclamer="Byggt á
          greiningu Ookla á Speedtest Intelligence gögnum frá 2017 og 2018.
          Notað undir höfundarrétti og endurprentað með leyfi Ookla."
        >
          <FooterIcon linkComponent={<LinkWrapper newTab href={social.facebook} />}>
            <Facebook />
          </FooterIcon>
          <FooterIcon linkComponent={<LinkWrapper newTab href={social.twitter} />}>
            <Twitter />
          </FooterIcon>
          <FooterIcon linkComponent={<LinkWrapper newTab href={social.snapchat} />}>
            <Snapchat />
          </FooterIcon>
          <FooterIcon linkComponent={<LinkWrapper newTab href={social.instagram} />}>
            <Instagram />
          </FooterIcon>
          <FooterIcon linkComponent={<LinkWrapper newTab href={social.youtube} />}>
            <YouTube />
          </FooterIcon>
        </Contact>

        <MoreLinks noBackground={noBackground}>
          <FooterGroup>
            <FooterLink linkComponent={<LinkWrapper newTab href={more.fyrir.link} />} noHover icon>
              <TwoForOne />
              <span>{more.fyrir.name}</span>
            </FooterLink>
            <FooterLink
              linkComponent={<LinkWrapper newTab href={more.fylltann.link} />}
              noHover
              icon
            >
              <Refill />
              <span>{more.fylltann.name}</span>
            </FooterLink>
            <FooterLink linkComponent={<LinkWrapper href={more.stollinn.link} />} noHover icon>
              <User />
              <span>{more.stollinn.name}</span>
            </FooterLink>
          </FooterGroup>
          <FooterGroup>
            <FooterLink linkComponent={<LinkWrapper newTab href={more.appid.link} />}>
              {more.appid.name}
            </FooterLink>
            <FooterLink onClick={() => openContact()}>{more.pantasimtal.name}</FooterLink>
            <FooterLink linkComponent={<LinkWrapper newTab href={more.thjonustuvertel.link} />}>
              {more.thjonustuver.name} <span>519 19 19</span>
            </FooterLink>
          </FooterGroup>
        </MoreLinks>
      </MobileFooter>
    );
  }

  return (
    <>
      {isReady && (
        <Footer isAbsolute={isAbsolute} {...props}>
          {!noContent && (
            <ContainerDeprecated row>
              <Contact
                logo={<NovaLogo />}
                linkComponent={<LinkWrapper href="/" />}
                title="Fylgdu okkur"
                disclamer="Byggt á greiningu Ookla á
            Speedtest Intelligence gögnum frá 2017 og 2018.
            Notað undir höfundarrétti og endurprentað með leyfi Ookla."
              >
                <FooterIcon linkComponent={<LinkWrapper newTab href={social.facebook} />}>
                  <Facebook />
                </FooterIcon>
                <FooterIcon linkComponent={<LinkWrapper newTab href={social.twitter} />}>
                  <Twitter />
                </FooterIcon>
                <FooterIcon linkComponent={<LinkWrapper newTab href={social.snapchat} />}>
                  <Snapchat />
                </FooterIcon>
                <FooterIcon linkComponent={<LinkWrapper newTab href={social.instagram} />}>
                  <Instagram />
                </FooterIcon>
                <FooterIcon linkComponent={<LinkWrapper newTab href={social.youtube} />}>
                  <YouTube />
                </FooterIcon>
              </Contact>

              <Tree>
                <FooterColumn
                  linkComponent={<LinkWrapper newTab href={footerheadings.thjonustuleidir.link} />}
                  title={footerheadings.thjonustuleidir.name}
                >
                  <FooterLink linkComponent={<LinkWrapper newTab href={farsimi.askrift.link} />}>
                    {farsimi.askrift.name}
                  </FooterLink>
                  <FooterLink linkComponent={<LinkWrapper newTab href={farsimi.frelsi.link} />}>
                    {farsimi.frelsi.name}
                  </FooterLink>
                  <FooterLink linkComponent={<LinkWrapper newTab href={netid.netid.link} />}>
                    {netid.netid.name}
                  </FooterLink>
                  <FooterLink linkComponent={<LinkWrapper newTab href={allt.overview.link} />}>
                    {allt.overview.name}
                  </FooterLink>
                  <FooterLink linkComponent={<LinkWrapper newTab href={netid.net.link} />}>
                    {netid.net.name}
                  </FooterLink>
                  <FooterLink linkComponent={<LinkWrapper newTab href={novatv.link} />}>
                    {novatv.name}
                  </FooterLink>
                  <FooterLink
                    linkComponent={<LinkWrapper newTab href={vip.fyrirtaekjathjonusta.link} />}
                  >
                    {vip.fyrirtaekjathjonusta.name}
                  </FooterLink>
                  <FooterLink linkComponent={<LinkWrapper newTab href={farsimi.urlausn.link} />}>
                    {farsimi.urlausn.name}
                  </FooterLink>
                </FooterColumn>

                <FooterColumn
                  linkComponent={<LinkWrapper newTab href={footerheadings.thjonusta.link} />}
                  title={footerheadings.thjonusta.name}
                >
                  <FooterLink
                    linkComponent={<LinkWrapper newTab href={farsimi.thjonustusvaedi.link} />}
                  >
                    {farsimi.thjonustusvaedi.name}
                  </FooterLink>
                  <FooterLink linkComponent={<LinkWrapper newTab href={baksvids.verslanir.link} />}>
                    {baksvids.verslanir.name}
                  </FooterLink>
                  <FooterLink linkComponent={<LinkWrapper newTab href={more.hvernig.link} />}>
                    {more.hvernig.name}
                  </FooterLink>
                  <FooterLink linkComponent={<LinkWrapper newTab href={baksvids.storf.link} />}>
                    {baksvids.storf.name}
                  </FooterLink>
                </FooterColumn>

                <FooterColumn
                  linkComponent={<LinkWrapper newTab href={footerheadings.vefverslun.link} />}
                  title={footerheadings.vefverslun.name}
                >
                  <FooterLink linkComponent={<LinkWrapper newTab href={barinn.farsimar.link} />}>
                    {barinn.farsimar.name}
                  </FooterLink>
                  <FooterLink
                    linkComponent={<LinkWrapper newTab href={barinn.snjallheimilid.link} />}
                  >
                    {barinn.snjallheimilid.name}
                  </FooterLink>
                  <FooterLink linkComponent={<LinkWrapper newTab href={barinn.dotabudin.link} />}>
                    {barinn.dotabudin.name}
                  </FooterLink>
                  <FooterLink linkComponent={<LinkWrapper newTab href={barinn.hljodbudin.link} />}>
                    {barinn.hljodbudin.name}
                  </FooterLink>
                  <FooterLink linkComponent={<LinkWrapper newTab href={barinn.aukahlutir.link} />}>
                    {barinn.aukahlutir.name}
                  </FooterLink>
                  <FooterLink linkComponent={<LinkWrapper newTab href={barinn.netbunadur.link} />}>
                    {barinn.netbunadur.name}
                  </FooterLink>
                </FooterColumn>
                <FooterColumn
                  linkComponent={<LinkWrapper newTab href={footerheadings.nova.link} />}
                  title={footerheadings.nova.name}
                >
                  <FooterLink linkComponent={<LinkWrapper newTab href={more.appid.link} />}>
                    {more.appid.name}
                  </FooterLink>
                  <FooterLink linkComponent={<LinkWrapper newTab href={more.tonar.link} />}>
                    {more.tonar.name}
                  </FooterLink>
                  <FooterLink linkComponent={<LinkWrapper newTab href={more.dansgolfid.link} />}>
                    {more.dansgolfid.name}
                  </FooterLink>
                  <FooterLink linkComponent={<LinkWrapper newTab href={more.endurgraeddu.link} />}>
                    {more.endurgraeddu.name}
                  </FooterLink>
                  <FooterLink linkComponent={<LinkWrapper newTab href={more.baksvids.link} />}>
                    {more.baksvids.name}
                  </FooterLink>
                  <FooterLink linkComponent={<LinkWrapper newTab href={skilmalar.link} />}>
                    {skilmalar.name}
                  </FooterLink>
                  <FooterLink
                    linkComponent={<LinkWrapper newTab href={baksvids.personuvernd.link} />}
                  >
                    {baksvids.personuvernd.name}
                  </FooterLink>
                  <FooterLink
                    linkComponent={<LinkWrapper newTab href={baksvids.oryggisstefna.link} />}
                  >
                    {baksvids.oryggisstefna.name}
                  </FooterLink>
                </FooterColumn>
              </Tree>
            </ContainerDeprecated>
          )}

          <MoreLinks noContent={noContent}>
            <FooterGroup>
              <FooterLink
                noHover
                linkComponent={<LinkWrapper newTab href={more.fyrir.link} />}
                icon
              >
                <TwoForOne />
                <span>{more.fyrir.name}</span>
              </FooterLink>
              <FooterLink
                noHover
                linkComponent={<LinkWrapper newTab href={more.fylltann.link} />}
                icon
              >
                <Refill />
                <span>{more.fylltann.name}</span>
              </FooterLink>
              <FooterLink noHover linkComponent={<LinkWrapper href={more.stollinn.link} />} icon>
                <User />
                <span>{more.stollinn.name}</span>
              </FooterLink>
            </FooterGroup>

            <FooterGroup>
              <FooterLink
                noSpacing
                linkComponent={<LinkWrapper newTab href={baksvids.verslanir.link} />}
              >
                {baksvids.verslanir.name}
              </FooterLink>
              <FooterLink noSpacing onClick={() => openContact()}>
                {more.pantasimtal.name}
              </FooterLink>
              <FooterLink noSpacing onClick={() => openContact()}>
                {more.hafasamband.name}
              </FooterLink>
              <FooterLink
                noSpacing
                linkComponent={<LinkWrapper newTab href={more.thjonustuvertel.link} />}
              >
                {more.thjonustuver.name} <span>{more.thjonustuvertel.name}</span>
              </FooterLink>
            </FooterGroup>
          </MoreLinks>
        </Footer>
      )}
    </>
  );
};

export default withRouter(inject('authentication', 'ui')(observer(FooterContainer)));