import React from 'react'
import {CopyToClipboard} from 'react-copy-to-clipboard'
import Button from 'part:@lyra/components/buttons/default'
import Copy from 'react-icons/lib/fa/copy'
import Check from 'react-icons/lib/fa/check'

import TextInput from 'part:@lyra/components/textinputs/default'

export default class CopyInput extends React.PureComponent<*> {
  state = {copied: false}

  componentDidUpdate(prevProps, prevState) {
    if (!prevState.copied && this.state.copied) {
      clearTimeout(this._copiedTimerId)
      this._copiedTimerId = setTimeout(
        () => this.setState({copied: false}),
        5000
      )
    }
  }

  render() {
    const {content} = this.props
    const {copied} = this.state
    return (
      <div style={{display: 'flex', width: '100%'}}>
        <div style={{flexGrow: 1}}>
          <TextInput
            value={content}
            readOnly
            onClick={e => e.target.select()}
          />
        </div>
        <CopyToClipboard
          text={content}
          onCopy={() => this.setState({copied: true})}
        >
          <Button
            color="primary"
            icon={copied ? Check : Copy}
            title={copied ? 'Copied!' : 'Copy to clipboard'}
          />
        </CopyToClipboard>
      </div>
    )
  }
}
