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

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

const { color, breakpoint } = ApoliticalBrand;

const ShareLinksWrapper = styled.div`
  display: table;
  g > path {
    fill: ${color.slate};
  }
`;

const SocialLink = styled.a`
  padding-right: 1rem;

  :first-of-type {
    margin-bottom: 6px;
  }

  svg:last-child {
    margin: 5px 8px;
  }
`;

const ShareText = styled.span`
  text-transform: capitalize;
  font-size: 1.4rem;
  letter-spacing: 2px;
  font-weight: 500;
  color: ${color.slate};
  display: table-cell;
  padding-right: 2rem;
  width: 1%;
  
  @media ${breakpoint.onlyScreen.mobileM}{
    vertical-align: middle;
  }
`;

const LinkContainers = styled.div`
  display: flex;
  align-items: center;
  flex-wrap: wrap;
`;

type Props = {
  className?: string,
  title: string,
  webpageLink: string,
  referrer: ?string,
  pageType: string,
}

const ShareLinks = ({
  className, title, webpageLink, referrer, pageType,
}:Props) => {
  const generateLink = (type) => `${webpageLink}?share=${type}${referrer ? `&uuid=${referrer}` : ''}`;

  const linkedinLink = `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(`${generateLink('linkedin')}&src=linkedin`)}&title=${encodeURIComponent(title)}&source=Apolitical`;

  const twitterLink = `https://twitter.com/share?ref_src=twsrc%5Etfw&url=${encodeURIComponent(`${generateLink('twitter')}&src=twitter`)}&text=${encodeURIComponent(title)}&via=${encodeURIComponent('apoliticalco')}`;

  const facebookLink = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(`${generateLink('facebook')}`)}&t=${title}`;

  const mailToLink = `mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(`${title}\n\n${generateLink('mailto')}&src=email`)}`;

  const copyLink = generateLink('copy');


  return (
    <ShareLinksWrapper className={className}>
      <ShareText>SHARE</ShareText>
      <LinkContainers>
        <SocialLink
          href={linkedinLink}
          target="_blank"
          rel="noopener noreferrer"
          className="gtm-trackable"
          data-gtm-event-context={`${pageType}-SocialButtons`}
          data-gtm-event-type="linkedin-click"
        >
          <LinkedinIcon />
        </SocialLink>
        <SocialLink
          href={twitterLink}
          target="_blank"
          rel="noopener noreferrer"
          className="gtm-trackable"
          data-gtm-event-context={`${pageType}-SocialButtons`}
          data-gtm-event-type="twitter-click"
        >
          <TwitterIcon />
        </SocialLink>
        <SocialLink
          href={facebookLink}
          target="_blank"
          rel="noopener noreferrer"
          className="gtm-trackable"
          data-gtm-event-context={`${pageType}-SocialButtons`}
          data-gtm-event-type="facebook-click"
        >
          <FacebookIcon />
        </SocialLink>
        <SocialLink
          href={mailToLink}
          iconType="network"
          target="_blank"
          rel="noopener noreferrer"
          className="gtm-trackable"
          data-gtm-event-context={`${pageType}-SocialButtons`}
          data-gtm-event-type="email-click"
        >
          <EmailIcon />
        </SocialLink>
        <ClipboardCopy
          url={copyLink}
          className="gtm-trackable"
          dataGtmEventContext={`${pageType}-SocialButtons`}
          dataGtmEventType="clipboard-copy-click"
        />
      </LinkContainers>
    </ShareLinksWrapper>
  );
};

ShareLinks.defaultProps = {
  className: '',
};

export default ShareLinks;