// import emotion
import { css } from 'emotion';

// import icons
import FaTwitter from 'react-icons/lib/fa/twitter';
import FaFacebook from 'react-icons/lib/fa/facebook';
import FaGooglePlus from 'react-icons/lib/fa/google-plus';
import FaEnvelope from 'react-icons/lib/fa/envelope';
import FaPinterest from 'react-icons/lib/fa/pinterest';
import FaLinkedin from 'react-icons/lib/fa/linkedin';

// import react-custom-share components
import { ShareButtonRectangle, ShareBlockStandard } from 'react-custom-share';

const ShareComponent = props => {
  // create object with props for shareBlock
  const shareBlockProps = {
    url: 'https://mywebsite.com/page-to-share/',
    button: ShareButtonRectangle,
    buttons: [
      { network: 'Twitter', icon: FaTwitter },
      { network: 'Facebook', icon: FaFacebook },
      { network: 'GooglePlus', icon: FaGooglePlus },
      { network: 'Email', icon: FaEnvelope },
      { network: 'Pinterest', icon: FaPinterest, media: 'https://mywebsite.com/image-to-share.jpg' },
      { network: 'Linkedin', icon: FaLinkedin },
    ],
    text: `Give it a try - mywebsite.com `,
    longtext: `Take a look at this super website I have just found.`,
  };

  return <ShareBlockStandard {...shareBlockProps} />;
};

import {
  // base components (unstyled)
  ShareButton,
  ShareBlock,

  // styled button components
  ShareButtonRoundSquare,
  ShareButtonRectangle,
  ShareButtonCircle,
  ShareButtonIconOnly,
  ShareButtonOutline,

  // styled block components
  ShareBlockStandard,
} from 'react-custom-share';

ShareButton.propTypes = {
  /* REQUIRED props */

  // network: social network name, one of the list: Twitter, Facebook, GooglePlus, Pinterest, Linkedin or Email
  network: PropTypes.string.isRequired,
  // url: the address of the page you want to share, 'https://mywebpage.com/'
  url: PropTypes.string.isRequired,
  // children: for the styled components it must be a svg icon, in other case it could be anything
  children: PropTypes.node.isRequired,

  /* SPECIAL props */

  // media: this is a special 'prop' it's required is network's value is 'Pinterest'
  media: function(props, propName, componentName) {
    const key = props['network'].toLowerCase();
    if (key === 'pinterest' && props[propName] === undefined) {
      return new Error(
        `The prop '${propName}' is marked as required in '${componentName}' for the 'Pinterest' network, but it's value is 'undefined'.`
      );
    }
  },

  /* OPTIONAL props */

  // text: short version of message you want to share with the url
  text: PropTypes.string,
  // longtext: additional text message, if it's possible and set it's concatenated to the `text` and serve as a comment with the shared url
  longtext: PropTypes.string,
  // className: CSS style class applied to the button
  className: PropTypes.string,
  // link: 'share link' for not built-in networks
  link: PropTypes.string,
};

ShareBlock.propTypes = {

  /* BUTTON's props */

  // props applied to each one of the buttons rendered by the block, explained already above
  url: PropTypes.string.isRequired,
  button: PropTypes.func.isRequired,
  buttons: PropTypes.array.isRequired,
  text: PropTypes.string,
  longtext: PropTypes.string,

  /* BLOCK's own props */

  // CSS style class applied to the block's outer div element
  className: PropTypes.string,
};

import { css } from 'emotion';

const ShareButtonCircle = props => {
  return (
    <ShareButton
      className={css`
        border-radius: 50%;
        /* ... for the clarity most of the real CSS code was removed */
      `}
      {...props}
    />
  );
};

export default ShareButtonCircle;