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

export class ProgressModal extends Component {
  static propTypes = {
    open: PropTypes.bool,
    message: PropTypes.string.isRequired,
    percent: PropTypes.number,
    onCancel: PropTypes.func,
  }

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

    return (
      <Modal isVisible={open}>
        <View
          style={{
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "transparent",
          }}>
          <ProgressBar height={30} value={percent} />
          <Text
            style={{
              marginTop: 20,
              fontSize: 18,
              alignSelf: "center",
              color: "#FFFFFF",
            }}>
            {message}
          </Text>
          <TouchableOpacity
            onPress={this.props.onCancel}
            style={{
              alignSelf: "center",
              marginTop: 30,
              marginBottom: 10,
              justifyContent: "center",
              paddingHorizontal: 10,
              height: 40,
              width: 100,
              backgroundColor: "#3BB0FD",
            }}>
            <Text style={{ alignSelf: "center", color: "black" }}>Cancel</Text>
          </TouchableOpacity>
        </View>
      </Modal>
    )
  }
}