import React from 'react';
import { connect } from '@cerebral/react';
import { sequences, state } from 'cerebral';
import {
  faFlag as faFlagRegular,
  faEnvelope,
} from '@fortawesome/free-regular-svg-icons';
import { faFlag as faFlagSolid } from '@fortawesome/free-solid-svg-icons';
import { faFacebook, faInstagram } from '@fortawesome/free-brands-svg-icons';

import {
  Wrapper,
  Column,
  Header,
  List,
  ContactImage,
  Link,
  Text,
} from './elements';

import UserLanguage from 'common/UserLanguage';

const dependencies = {
  currentLanguage: state`language`,
  languageClicked: sequences`app.setLanguage`,
  isPresentation: state`competition.isPresentation`,
};

function Footer({
  className,
  languageClicked,
  currentLanguage,
  isPresentation,
}) {
  if (isPresentation) return false;

  return (
    <UserLanguage>
      {t => (
        <Wrapper className={className}>
          <Column>
            <Header>{'Støttespillere'}</Header>
            <Link
              href="https://www.sit.no/"
              target={'_blank'}
              rel={'noreferrer'}
            >
              <Text>{'SiT'}</Text>
            </Link>
            <Link
              href="http://www.fotoimport.no/"
              target={'_blank'}
              rel={'noreferrer'}
            >
              <Text>{'Fotoimport AS'}</Text>
            </Link>
          </Column>
          <Column>
            <Header>
              <Link
                href="https://www.facebook.com/sk.ntnu"
                target={'_blank'}
                rel={'noreferrer'}
              >
                <ContactImage icon={faFacebook} />
                {' Facebook'}
              </Link>
            </Header>
            <Header>
              <Link
                href="https://www.instagram.com/sk_ntnu"
                target={'_blank'}
                rel={'noreferrer'}
              >
                <ContactImage icon={faInstagram} />
                {' Instagram'}
              </Link>
            </Header>
            <Header>
              <Link href="mailto:ntnu.sk@gmail.com">
                <ContactImage icon={faEnvelope} />
                {' Mail'}
              </Link>
            </Header>
          </Column>
          <Column>
            <Header>{'Choose language'}</Header>
            <List
              onClick={() => languageClicked({ language: 'no' })}
              active={currentLanguage === 'no'}
            >
              <ContactImage
                icon={currentLanguage === 'no' ? faFlagSolid : faFlagRegular}
              />
              <Text>{' Norsk'}</Text>
            </List>
            <List
              onClick={() => languageClicked({ language: 'en' })}
              active={currentLanguage === 'en'}
            >
              <ContactImage
                icon={currentLanguage === 'en' ? faFlagSolid : faFlagRegular}
              />

              <Text>{' English'}</Text>
            </List>
          </Column>
        </Wrapper>
      )}
    </UserLanguage>
  );
}

export default connect(
  dependencies,
  Footer
);
