import React, { Component } from 'react'

import actions from 'app/actions'
import { writeToClipboard } from 'app/utils'
import { Arrow } from '../nav/viewer.icons'
import { URLS } from 'app/constants'

export default class ViewerSectionsShare extends Component {
  state = {
    copied: false,
  }
  constructor(props){
    super(props)
    this.copyToClipboard = this.copyToClipboard.bind(this)
  }
  copyToClipboard() {
    const url = URLS.share_url
    writeToClipboard(url).then(() =>{
      clearTimeout(this.timeout)
      this.setState({ copying: true, copied: false, })
      this.timeout = setTimeout(() => {
        this.setState({ copying: true, copied: true })
        this.timeout = setTimeout(() => this.setState({ copied: false, copying: false, }), 2200)
      }, 50)
    })
  }
  render() {
    const { viewer } = this.props
    let className = "nav-share"
    if (this.state.copying) className += " copying"
    if (this.state.copied) className += " copied"
    const title = "Animism: Episode 1"
    const url = URLS.share_url
    const mailtoURL = (
      "mailto:?subject=" + encodeURIComponent(title) +
      "&body=" + encodeURIComponent("I want to share this post on e-flux: " + url + "\n\n\n")
    )
    const facebookURL = (
      "https://www.facebook.com/sharer.php" +
      "?u=" + encodeURIComponent(url) +
      "&t=" + encodeURIComponent(title)
    )
    const twitterURL = (
      "https://twitter.com/intent/tweet" +
      "?url=" + encodeURIComponent(url) +
      "&text=" + encodeURIComponent(title)
    )
    return (
      <div className={className}>
        <div>
          <div className="share-option">
            <a href={mailtoURL}>Email</a>
          </div>
          <div className="share-option">
            <a href={facebookURL}>Facebook</a>
          </div>
          <div className="share-option">
            <a href={twitterURL}>Twitter</a>
          </div>
          <div className="share-option">
            <div className="share-copy" onClick={this.copyToClipboard}>
              Copy Link
              <span className="share-success">success</span>
            </div>
          </div>
        </div>
        <ShareLink type={'down'} />
      </div>
    )
  }
}

const ShareLink = ({ type }) => (
  <div className="nav-return" onClick={() => actions.viewer.hideNavComponent('share')}>
    <Arrow type={type} />
    {'Share'}
  </div>
)