import React from 'react';

import Facebook from '../../assets/img/icons/facebook.svg';
import Twitter from '../../assets/img/icons/twitter.svg';
import Linkedin from '../../assets/img/icons/linkedin.svg';
import { SocialNetworksContainer } from '../../styles/components/blog/SocialNetwork.style';
import { useRouter } from 'next/router';

interface Props {
  url?: string;
  text: string;
}

const SocialNetworks: React.FC<Props> = ({ url, text }) => {
  const router = useRouter();
  const urlEncoded = encodeURI(url || `${process.env.MARKETING_DOMAIN}${router.asPath}`);
  const textEncoded = encodeURI(text);

  const openShare = (urlSocial: string): Window => window.open(
    urlSocial,
    'share',
    'height=666,width=666,modal=yes,alwaysRaised=yes'
  );

  return (
    <SocialNetworksContainer>
      <button
        type="button"
        onClick={() => openShare(
          `https://www.facebook.com/sharer/sharer.php?u=${urlEncoded}&quote=${textEncoded}`
        )}>
        <Facebook />
      </button>
      <button
        type="button"
        onClick={() => openShare(
          `https://twitter.com/intent/tweet?url=${urlEncoded}&text=${textEncoded}`
        )}>
        <Twitter />
      </button>
      <button
        type="button"
        onClick={() => openShare(
          `https://www.linkedin.com/sharing/share-offsite/?url=${urlEncoded}`
        )}>
        <Linkedin />
      </button>
    </SocialNetworksContainer>);
};

export default SocialNetworks;