import React, { Component } from 'react';
import { View, Modal, TouchableOpacity } from 'react-native';
import Text from "./Text";

export default class Popup extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <View>
        <Modal animationType="none"
               transparent={true}
               visible={this.props.modalVisible}
               onRequestClose={() => {
                 Alert.alert('Modal has been closed.');
               }}>
          <View style={{flex:1,backgroundColor:'#00000080',justifyContent:'center',alignItems:'center'}}>
            <View style={{width: '90%',backgroundColor:'white',borderRadius:5,paddingVertical: 27, paddingHorizontal: 17}}>
              <Text style={[{color:'#2C7C0B', fontFamily: 'Prompt-Bold',fontSize: 18}, this.props.styleTitle ? this.props.styleTitle : {}]}>
                {this.props.title}
              </Text>
              {
                this.props.message && <Text style={[{color:'#00000080',fontSize: 14,marginVertical: 15}, this.props.styleMessage ? this.props.styleMessage : {}]}>{this.props.message}</Text>
              }
              <View style={[{flexDirection:'row', width: '100%', justifyContent: 'center', marginTop: 30}, this.props.styleFooter ? this.props.styleFooter : {}]}>
                <View style={{width: '50%'}}>
                  {
                    this.props.onCancel &&
                    <TouchableOpacity onPress={() => {this.props.onCancel()}}>
                      <Text style={{color:'#269A21',fontSize: 14, textAlign: 'center'}}>Cancel</Text>
                    </TouchableOpacity>
                  }
                </View>

                <View style={{width: '50%'}}>
                  <TouchableOpacity onPress={() => {this.props.onConfirm && this.props.onConfirm()}}>
                    <Text style={[{color:'#269A21',fontSize: 14,textAlign: 'center'}, this.props.styleConfirmBtn ? this.props.styleConfirmBtn : {} ]}>
                      OK
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}
