import React, { useState } from 'react'
import { string } from 'prop-types'
import Button from '../Button/Button'
import './CopyLinkButton.less'

const CopyLinkButton = ({ joinLink }) => {
  const [copied, copyLink] = useState(false)
  // TODO: This ref should be made with useRef
  let copyLinkInputRef

  return (
    <div className="copy-link-button">
      <Button
        onClick={() => {
          copyLinkInputRef.select()
          document.execCommand('copy')
          copyLink(true)
          setTimeout(() => {
            copyLink(false)
          }, 2000)
        }}
        white
        icon="copy"
        title={copied ? 'COPIED!' : "COPY LINK"}
      />
      <input className='hide-copylink-input' ref={(ref) => copyLinkInputRef = ref} defaultValue={joinLink} />
    </div>
  )
}

CopyLinkButton.propTypes = {
  joinLink: string.isRequired
}

export default CopyLinkButton