const SocialShare = React.createClass({

  propTypes: {
    url: React.PropTypes.string.isRequired,
    title: React.PropTypes.string.isRequired,
  },

  getInitialState: function() {
    return {showShare: false};
  },

  viaTwitter() {
    return !!Settings.get('twitterAccount') ? 'via='+Settings.get('twitterAccount') : '';
  },

  toggleView() {
    this.setState({
      showShare: !this.state.showShare
    });
    return;
  },

  insertIcon(name) {
    return {__html: Telescope.utils.getIcon(name)};
  },

  render() {
    let shareDisplay = this.state.showShare ? 'active' : 'hidden';
    return (
      <div className="social-share">
        <a className="share-link action" title="share" onClick={ this.toggleView } dangerouslySetInnerHTML={ this.insertIcon('share')}/>
        <div className={ `share-options ${shareDisplay}` }>
          <a className="share-option-facebook" href={ `https://www.facebook.com/sharer/sharer.php?u=${ encodeURIComponent(FlowRouter.url(this.props.url)) }`} target="_blank" dangerouslySetInnerHTML={ this.insertIcon('facebook')} />
          <a className="share-option-twitter" href={ `//twitter.com/intent/tweet?text=${ encodeURIComponent(this.props.title) }%20-%20${ encodeURIComponent(FlowRouter.url(this.props.url)) }` } target="_blank" dangerouslySetInnerHTML={ this.insertIcon('twitter')}/>
          <a className="share-option-linkedin" href={ `//www.linkedin.com/shareArticle?mini=true&url=${ encodeURIComponent(FlowRouter.url(this.props.url)) }&summary=${ encodeURIComponent(this.props.title) }` } target="_blank" dangerouslySetInnerHTML={ this.insertIcon('linkedin')}/>
          <a className="share-option-google" href={ `https://plus.google.com/share?url=${ encodeURIComponent(FlowRouter.url(this.props.url)) }` } target="_blank" dangerouslySetInnerHTML={ this.insertIcon('googleplus')}/>
        </div>
      </div>
    )
  }
});

module.exports = SocialShare;