import React from 'react'
import PropTypes from 'prop-types'
import { Modal, Button, Column, Row, Text, Icon } from 'ui'
import { sizeInfo } from 'ui/style'

export class MessageModal extends React.Component {
  static propTypes = {
    open: PropTypes.bool,
    icon: PropTypes.string.isRequired,
    message: PropTypes.string.isRequired,
    detail: PropTypes.string,
    onDismiss: PropTypes.func
  }

  render() {
    const { onDismiss, open, icon, message, detail } = this.props

    return (
      <Modal open={open} width={400} onCancel={onDismiss}>
        <Row>
          <Row.Item>
            <Icon name={icon} size={150} />
          </Row.Item>
          <Row.Item grow>
            <Column height='100%'>
              <Column.Item height={15} />
              <Column.Item grow>
                <Text width='100%' align='center'>{message}</Text>
              </Column.Item>
              <Column.Item>
                <Text width='100%' align='center' tone='dimmed' size='small'>{detail}</Text>
              </Column.Item>
              <Column.Item height={15} />
              <Column.Item height={sizeInfo.buttonHeight}>
                <Row>
                  <Row.Item grow />
                  <Row.Item>
                    <Button onClick={onDismiss}>OK</Button>
                  </Row.Item>
                  <Row.Item grow />
                </Row>
              </Column.Item>
              <Column.Item height={15} />
            </Column>
          </Row.Item>
          <Row.Item width={10} />
        </Row>
      </Modal>
    )
  }
}