import React from 'react';
import PropTypes from 'prop-types';
import { FaFacebookF } from '@react-icons/all-files/fa/FaFacebookF';
import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter';

import { getUrl } from '~helpers/getters';

import styles from './open-graph.module.scss';

const OpenGraph = ({ page, text = 'Share: ' }) => {
  const { path, title } = page;

  const fbURL = `https://www.facebook.com/sharer/sharer.php?caption=${title}&u=${getUrl(path)}`;
  const twitterURL = `https://twitter.com/intent/tweet?text=${title}&url=${getUrl(path)}`;

  const share = (e, width, height) => {
    e.preventDefault();
    window.open(
      e.currentTarget.href,
      '',
      `menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=${height},width=${width}`
    );
    return false;
  };
  return (
    <div className={styles.openGraphContainer || ''}>
      <span>{text}</span>
      <a
        target="_blank"
        rel="noreferrer"
        href={fbURL}
        role="button"
        className={`${styles.btn || ''} open-graph-gtm`}
        onClick={(e) => share(e, 555, 602)}
        aria-label="Facebook Link"
      >
        <FaFacebookF title="Facebook Icon" />
      </a>
      <a
        target="_blank"
        rel="noreferrer"
        href={twitterURL}
        role="button"
        className={`${styles.btn || ''} open-graph-gtm`}
        onClick={(e) => share(e, 555, 255)}
        aria-label="Twitter Link"
      >
        <FaTwitter title="Twitter Icon" />
      </a>
    </div>
  );
};

OpenGraph.propTypes = {
  page: PropTypes.shape({
    title: PropTypes.string,
    path: PropTypes.string,
  }).isRequired,
  text: PropTypes.string,
};

export default OpenGraph;
