import React, { Component } from 'react'
import { Alert } from '@blueprintjs/core'

import ModalManager from './modalManager'

class Example extends Component {
  handle = (modal) => async () => {
    const result = await modal.result()
    alert(result)
  }

  render () {
    return (
      <div>
        <button onClick={this.handle(this.modal1)}>Open Modal 1</button> <button onClick={this.handle(this.modal2)}>Open Modal 2</button>
        <hr />
        <ModalManager ref={el => this.modal1 = el}>
          {({ open, handleAction }) => (
            <Alert
              cancelButtonText='Cancel'
              confirmButtonText='Confirm'
              isOpen={open}
              onCancel={handleAction('cancel 1')}
              onConfirm={handleAction('confirm 1')}
            >
              <p>Are you sure?</p>
            </Alert>
          )}
        </ModalManager>
        <ModalManager ref={el => this.modal2 = el}>
          {({ open, handleAction }) => (
            <Alert
              cancelButtonText='Cancel'
              confirmButtonText='Confirm'
              isOpen={open}
              onCancel={handleAction('cancel 2')}
              onConfirm={handleAction('confirm 2')}
            >
              <p>Are you sure?</p>
            </Alert>
          )}
        </ModalManager>
      </div>
    )
  }
}

export default Example