import React, { Component } from "react"
import Modal from "react-native-modal"
import PropTypes from "prop-types"
import { View, Text, TouchableOpacity } from "react-native"
import { Icon } from "../ui"
import autobind from "autobind-decorator"

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

  @autobind
  handleButtonPress() {
    const { onDismiss } = this.props

    if (onDismiss) {
      onDismiss()
    }
  }

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

    return (
      <Modal isVisible={open}>
        <View
          style={{
            flexDirection: "row",
            width: "100%",
            padding: 5,
            backgroundColor: "#FFFFFF",
          }}>
          <Icon name={icon} size={100} margin={3} />
          <View
            style={{
              flexGrow: 1,
              flexBasis: 0,
              flexDirection: "column",
              flexWrap: "wrap",
              marginLeft: 20,
              marginRight: 20,
            }}>
            <Text style={{ marginTop: 5, fontSize: 18 }}>{message}</Text>
            <Text style={{ marginTop: 20 }}>{detail}</Text>
            <TouchableOpacity
              onPress={this.handleButtonPress}
              style={{
                alignSelf: "flex-end",
                backgroundColor: "blue",
                marginTop: 20,
                marginBottom: 10,
                justifyContent: "center",
                paddingHorizontal: 10,
                height: 40,
                width: 100,
                backgroundColor: "#3BB0FD",
              }}>
              <Text style={{ alignSelf: "center", color: "black" }}>OK</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    )
  }
}