// @flow
import React from 'react';
import styled from 'styled-components';
import uuid from 'react-uuid';

import ApoliticalBrand from '../../../Theme/ApoliticalBrand';
import Atom from '../../Atom';
import FacebookIcon from '../../Atom/SocialMediaIcon/FacebookIcon';
import TwitterIcon from '../../Atom/SocialMediaIcon/TwitterIcon';
import LinkedinIcon from '../../Atom/SocialMediaIcon/LinkedinIcon';

const { color } = ApoliticalBrand;
const { NewspaperIcon, GreyDivider } = Atom;

const SiteTitle = styled.a`
  height: 3rem;
  display: block;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
  background-image: url(https://assets.apolitical.co/logos/apolitical-logo-light.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  max-width: 1170px;
  margin: 0 auto;

  @media only screen and (min-width: 545px) {
    background-position: left;
  }
`;

const Wrapper = styled.div`
  padding: 60px 40px 100px 40px;
  background-color: ${color.gray};
  color: ${color.coolGrey2};
  font-size: 1.6rem;
  font-weight: 700;
`;

const BorderTopStylingDiv = styled.div`
  height: 30px;
  background: linear-gradient(269deg, ${color.lightBlueGrey}, ${color.duckEggBlue} 0%);
`;

const FooterMainWrapper = styled.footer`
  display: flex;
  hyphens: none;
  line-height: 2rem;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1170px;
  margin: 0 auto 60px auto;

  @media only screen and (min-width: 860px){
    flex-wrap: nowrap;
  }

  @media only screen and (min-width: 545px) {
    flex-direction: row;
    justify-content: center;
  }
`;

const FooterGroupContainer = styled.div`
  width: 100%;
  margin-top: 60px;
  text-align: center;

  @media only screen and (min-width: 545px) {
    padding-right: 20px;
    text-align: left;
    width: 44%;
  }

  @media only screen and (min-width: 860px){
    width: 25%;
  }
`;

const FooterTitleText = styled.p`
  text-transform: uppercase;
  font-size: 1.4rem;
  line-height: normal;
  letter-spacing: 2px;
  color: ${color.slate};
  font-weight: 500;
`;

const FooterGroupWrapper = styled.div`
  margin-top: 14px;
`;

const PurpleLink = styled.a`
  text-decoration: none;
  font-size: 1.6rem;
  color: ${color.purple};
  display: block;
  padding-top: 16px;
  font-weight: normal;

  :hover{
    text-decoration: underline;
  }
`;

const ContactHeadings = styled.p`
  text-transform: uppercase;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: ${color.charcoal};
  padding-top: 16px;
`;

const ContactTextLink = styled.a`
  color: ${color.coolGrey2};
  font-size: 1.4rem;
  text-decoration: none;
  font-weight: normal;

  :hover{
    text-decoration: underline;
  }
`;

const AddressText = styled.p`
  font-size: 1.4rem;
  font-weight: normal;
`;

const WriteText = styled.p`
  padding-top: 16px;
  font-size: 1.4rem;
  color: ${color.coolGrey2};
  font-weight: normal;
`;

const WriteHowText = styled.span`
  padding-left: 14px;
  vertical-align: super;
`;

const SubFooter = styled.div`
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  max-width: 1170px;
  margin: 40px auto 0 auto;

  @media only screen and (min-width: 680px) {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
`;

const SocialLinks = styled.a`
  margin-right: 40px;
  font-weight: normal;

  :last-child {
    margin-right: 0;
  }
`;

const LegalText = styled.p`
  margin-top: 60px;
  margin-bottom: 14px;
  font-size: 1.2rem;
  color: ${color.slate};
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
`;

const CopyrightText = styled.p`
  color: ${color.gunmetal};
  margin-top: 30px;
  font-size: 1.2rem;
  font-weight: normal;

  @media only screen and (min-width: 680px) {
    margin-top: 0px;
    margin-right: 0px;
  }
`;

const StyledGreyDivider = styled(GreyDivider)`
  max-width: 1170px;
  margin: 0  auto;
`;

const currentYear = new Date().getFullYear();

const companyLinks = [
  { name: 'Our story', href: 'https://about.apolitical.co/our-story', gtmType: 'our-story-link' },
  { name: 'Meet our team', href: 'https://about.apolitical.co/meet-our-team', gtmType: 'team-link' },
  { name: 'Careers', href: 'https://about.apolitical.co/careers', gtmType: 'careers-link' },
  { name: 'Partner with us', href: 'https://about.apolitical.co/partner-with-apolitical', gtmType: 'partner-with-us-link' },
  { name: 'Get in touch', href: 'https://about.apolitical.co/get-in-touch', gtmType: 'contact-link' },
];

const productLinks = [
  { name: 'Events', href: '/events', gtmType: 'events-link' },
  { name: 'Courses', href: '/microcourses', gtmType: 'courses-link' },
  { name: 'Q&A', href: '/questions-answers', gtmType: 'questions-and-answers-link' },
  { name: 'Articles', href: '/collections', gtmType: 'articles-link' },
];

const correspondenceAddress = [
  '251 Southwark Bridge Road',
  'London, SE1 6FL',
  'United Kingdom',
];

const registeredAddress = [
  '20-22 Wenlock Road',
  'London, N1 7GU',
  'United Kingdom',
];

const contacts = [
  {
    name: 'Phone',
    value: '+44 203 608 2241',
    href: 'tel:+442036082241',
    gtmType: 'phone-link',
  },
  {
    name: 'For platform support',
    value: 'concierge@apolitical.co',
    href: 'mailto:concierge@apolitical.co',
    gtmType: 'concierge-email-link',
  },
  {
    name: 'For business inquiries',
    value: 'hello@apolitical.co',
    href: 'mailto:hello@apolitical.co?subject=Message%20from%20the%20website',
    gtmType: 'hello-email-link',
  },
];

const Footer = () => (
  <>
    <BorderTopStylingDiv />
    <Wrapper>
      <SiteTitle
        href="/home"
        className="gtm-trackable"
        data-gtm-event-context="SiteFooter"
        data-gtm-event-type="logo-homepage-link"
      >
        Apolitical
      </SiteTitle>
      <FooterMainWrapper>
        <FooterGroupContainer>
          <FooterTitleText>Company</FooterTitleText>
          <FooterGroupWrapper>
            {companyLinks.map(({ name, href, gtmType }) => (
              <PurpleLink
                key={uuid()}
                target="_blank"
                rel="noopener"
                href={href}
                className="gtm-trackable"
                data-gtm-event-context="SiteFooter"
                data-gtm-event-type={gtmType}
              >
                {name}
              </PurpleLink>
            ))}
          </FooterGroupWrapper>
        </FooterGroupContainer>
        <FooterGroupContainer>
          <FooterTitleText>Product</FooterTitleText>
          <FooterGroupWrapper>
            {productLinks.map(({ href, name, gtmType }) => (
              <PurpleLink
                key={uuid()}
                href={href}
                className="gtm-trackable"
                data-gtm-event-context="SiteFooter"
                data-gtm-event-type={gtmType}
              >
                {name}
              </PurpleLink>
            ))}
          </FooterGroupWrapper>
        </FooterGroupContainer>
        <FooterGroupContainer>
          <FooterTitleText>Contact</FooterTitleText>
          <FooterGroupWrapper>
            <ContactHeadings>Correspondence address</ContactHeadings>
            {correspondenceAddress.map((line) => (
              <AddressText key={uuid()}>{line}</AddressText>
            ))}
            <ContactHeadings>Registered address</ContactHeadings>
            {registeredAddress.map((line) => (
              <AddressText key={uuid()}>{line}</AddressText>
            ))}
            {contacts.map(({
              name, value, href, gtmType,
            }) => (
              <div key={uuid()}>
                <ContactHeadings>{name}</ContactHeadings>
                <ContactTextLink
                  href={href}
                  className="gtm-trackable"
                  data-gtm-event-context="SiteFooter"
                  data-gtm-event-type={gtmType}
                >
                  {value}
                </ContactTextLink>
              </div>
            ))}
          </FooterGroupWrapper>
        </FooterGroupContainer>
        <FooterGroupContainer>
          <FooterTitleText>Write for us</FooterTitleText>
          <FooterGroupWrapper>
            <WriteText>
              Our members contribute opinion articles on the best new innovations in government.
              Reach out to us to hear how you can share your insights.
            </WriteText>
            <PurpleLink
              href="/opinion-writing-becoming-an-apolitical-contributor"
              className="gtm-trackable"
              data-gtm-event-context="SiteFooter"
              data-gtm-event-type="become-contributor-link"
            >
              <NewspaperIcon />
              <WriteHowText>Find out how</WriteHowText>
            </PurpleLink>
            <LegalText>Legal</LegalText>
            <PurpleLink
              target="_blank"
              rel="noopener"
              href="https://about.apolitical.co/privacy-policy"
              className="gtm-trackable"
              data-gtm-event-context="SiteFooter"
              data-gtm-event-type="privacy-policy-link"
            >
              Privacy policy
            </PurpleLink>
            <PurpleLink
              target="_blank"
              rel="noopener"
              href="https://about.apolitical.co/terms-and-conditions"
              className="gtm-trackable"
              data-gtm-event-context="SiteFooter"
              data-gtm-event-type="terms-conditions-link"
            >
              Terms & Conditions
            </PurpleLink>
            <PurpleLink
              target="_blank"
              rel="noopener"
              href="/pages/cookie-policy"
              className="gtm-trackable"
              data-gtm-event-context="SiteFooter"
              data-gtm-event-type="cookie-policy-link"
            >
              Cookie policy
            </PurpleLink>
            <ContactHeadings>Data protection officer</ContactHeadings>
            <ContactTextLink
              href="mailto:dpo@apolitical.co"
              className="gtm-trackable"
              data-gtm-event-context="SiteFooter"
              data-gtm-event-type="email-dpo-link"
            >
              dpo@apolitical.co
            </ContactTextLink>
            <ContactHeadings>EU Data Protection Officer</ContactHeadings>
            <ContactTextLink
              href="mailto:dpo.agl@apolitical.foundation"
              className="gtm-trackable"
              data-gtm-event-context="SiteFooter"
              data-gtm-event-type="email-eu-dpo-link"
            >
              dpo.agl@apolitical.foundation
            </ContactTextLink>
          </FooterGroupWrapper>
        </FooterGroupContainer>
      </FooterMainWrapper>
      <StyledGreyDivider />
      <SubFooter>
        <div>
          <SocialLinks
            target="_blank"
            rel="noopener noreferrer"
            href="https://www.facebook.com/apoliticalco"
            className="gtm-trackable"
            data-gtm-event-context="SiteFooter"
            data-gtm-event-type="facebook-link"
          >
            <FacebookIcon />
          </SocialLinks>
          <SocialLinks
            target="_blank"
            rel="noopener noreferrer"
            href="https://twitter.com/apoliticalco"
            className="gtm-trackable"
            data-gtm-event-context="SiteFooter"
            data-gtm-event-type="twitter-link"
          >
            <TwitterIcon />
          </SocialLinks>
          <SocialLinks
            target="_blank"
            rel="noopener noreferrer"
            href="https://www.linkedin.com/company/apolitical"
            className="gtm-trackable"
            data-gtm-event-context="SiteFooter"
            data-gtm-event-type="linkedin-link"
          >
            <LinkedinIcon />
          </SocialLinks>
        </div>
        <CopyrightText>
          Copyright © {currentYear} Apolitical Group Limited
        </CopyrightText>
      </SubFooter>
    </Wrapper>
  </>
);


export default Footer;