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

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,
  }

  @autobind
  onSubmit(e) {
    e.preventDefault()
    e.stopPropagation()

    const { onDismiss } = this.props

    if (onDismiss) {
      onDismiss()
    }
  }

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

    return (
      <Modal open={open} width={sizeInfo.modalWidth}>
        <form onSubmit={this.onSubmit} id="MessageForm">
          <Row>
            <Row.Item>
              <Icon name={icon} size={sizeInfo.modalMessageIcon} />
            </Row.Item>
            <Row.Item grow>
              <Column height="100%">
                <Column.Item height={sizeInfo.formColumnSpacing} />
                <Column.Item grow>
                  <Text width="100%" align="center">
                    {message}
                  </Text>
                </Column.Item>
                <Column.Item>
                  <Text width="100%" align="center" color="dimmed" size="small">
                    {detail}
                  </Text>
                </Column.Item>
                <Column.Item height={sizeInfo.formColumnSpacing} />
                <Column.Item height={sizeInfo.buttonHeight}>
                  <Row>
                    <Row.Item grow />
                    <Row.Item>
                      <Button
                        submit="MessageForm"
                        text="OK"
                        onClick={this.onSubmit}
                      />
                    </Row.Item>
                    <Row.Item grow />
                  </Row>
                </Column.Item>
                <Column.Item height={sizeInfo.formColumnSpacing} />
              </Column>
            </Row.Item>
            <Row.Item width={sizeInfo.formRowSpacing} />
          </Row>
        </form>
      </Modal>
    )
  }
}