import React, { Component } from 'react'

class ConfirmButton extends Component {
  state = {
    sure: false
  }

  handleReallySure = event => {
    event.preventDefault()

    const { onReallySure, reallySureMessage } = this.props
    window.confirm(reallySureMessage) ? onReallySure() : this.setState({ sure: false })
  }

  handleNotSure = event => {
    event.preventDefault()
    this.setState({ sure: false })
  }

  render() {
    const { sure } = this.state
    const { children } = this.props

    return sure ?
      <div className="confirm">
        Are you sure?
        <a href="#" onClick={this.handleReallySure}>Yes</a>
        /
        <a href="#" onClick={this.handleNotSure}>No</a>
      </div>
      :
      <button className="confirm" onClick={() => this.setState({ sure: true })}>
        {children}
      </button>
  }
}

export default ConfirmButton