class ContextMenu extends React.Component {
  constructor(props) {
    super(props)
    this.setWrapperRef = this.setWrapperRef.bind(this)
  }
  
  componentDidMount() {
    feather.replace()
    document.addEventListener('mousedown', this.handleClickOutside)
  }
  
  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside)
  }
  
  setWrapperRef(node) {
    this.wrapperRef = node
  }

  handleClickOutside = (e) => {
    const {status, closeContextMenu} = this.props
    if (status && this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      closeContextMenu()
    }
  }
  
  render() {
    const { status, text, x, y } = this.props
    return (
    <div 
      className='tooltip' 
      ref={this.setWrapperRef}
      style={
        status ? 
          {display:'inline-block', top:y, left:x} 
        : {display:'none'}}
     >
      <div className='tooltipContent'>
        <a class="twitter-share-button"
href={`https://twitter.com/intent/tweet?related="bmwiputri,codepen"&text=${encodeURIComponent(text)}`} target="_blank">
         <i data-feather="twitter"/>
        </a>
      </div>
    </div>
    )
  }
}

class Poem extends React.Component {
  constructor() {
    super()
    this.state = {
      showContextMenu: {
        status: false,
        x: 0,
        y: 0
      },
      highlightedText: ''
    }
  }

  handleMouseUp = () => {
    var selection = '';

    if (window.getSelection()) {
      selection = window.getSelection()
    } else if (document.getSelection()) {
      selection = document.getSelection()
    } else if (document.selection) {
      selection = document.selection.createRange().text
    }
    
    if (selection.toString().length > 0) {
      const { scrollX, scrollY } = window
      const range = selection.getRangeAt(0); 
      const getRect = range.getBoundingClientRect();
      const { y, x, right } = getRect
      this.setState({
        showContextMenu: {
          status: true,
          x: `calc(${right}px - 2.25em)`,
          y: `calc(${y + scrollY}px - 2.5em)`
        }, 
        highlightedText:selection.toString()
      })
    }    
  }
  
  closeContextMenu = () => {
    this.setState({
      showContextMenu: {
          status: false,
          x: 0,
          y: 0
        }, 
        highlightedText:''
    })
  }
  
  render() {
    const { showContextMenu, highlightedText } = this.state
    const { status, x, y } = showContextMenu
    const tweetedText = `"${highlightedText}"
-- sent from https://codepen.io/brigitamaria/pen/dEqXEm`
    
    return(
      <>
        <ContextMenu status={status} text={tweetedText} x={x} y={y} closeContextMenu={this.closeContextMenu}/>
        
        <>
          <h1>If—</h1>
          <h3>BY RUDYARD KIPLING</h3>
        </>
        <p className='poemContent' onMouseUp={this.handleMouseUp}>
           If you can keep your head when all about you<br/>   
    Are losing theirs and blaming it on you,<br/>    
If you can trust yourself when all men doubt you,<br/>  
    But make allowance for their doubting too; <br/>    
If you can wait and not be tired by waiting,<br/>  
    Or being lied about, don’t deal in lies,<br/>  
Or being hated, don’t give way to hating,<br/>  
    And yet don’t look too good, nor talk too wise:<br/><br/>  

If you can dream—and not make dreams your master;<br/>     
    If you can think—and not make thoughts your aim;   <br/>  
If you can meet with Triumph and Disaster<br/>  
    And treat those two impostors just the same;<br/>     
If you can bear to hear the truth you’ve spoken<br/>  
    Twisted by knaves to make a trap for fools,<br/>  
Or watch the things you gave your life to, broken,<br/> 
    And stoop and build ’em up with worn-out tools:<br/><br/>  

If you can make one heap of all your winnings<br/>  
    And risk it on one turn of pitch-and-toss,<br/>  
And lose, and start again at your beginnings<br/>  
    And never breathe a word about your loss;<br/> 
If you can force your heart and nerve and sinew<br/>  
    To serve your turn long after they are gone,<br/>     
And so hold on when there is nothing in you<br/>  
    Except the Will which says to them: ‘Hold on!’<br/>  <br/>  

If you can talk with crowds and keep your virtue, <br/>   
    Or walk with Kings—nor lose the common touch,<br/>
If neither foes nor loving friends can hurt you,<br/>  
    If all men count with you, but none too much;<br/>  
If you can fill the unforgiving minute<br/>  
    With sixty seconds’ worth of distance run, <br/>   
Yours is the Earth and everything that’s in it,<br/>     
    And—which is more—you’ll be a Man, my son!
        </p>
      </>
    )
  }
}

ReactDOM.render(<Poem />, document.getElementById('app'));