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

export default class PopupMeter 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,padding:17}}>
              <Text style={{color:'#2C7C0B',fontSize: 18,}}>ยีนยันหมายเลขหน่วย</Text>
              <Text style={{color:'#00000080',fontSize: 14,marginVertical: 15,}}>ระบบอาจจะใช้เวลาในการประมวลผลข้อมูล เพื่อเช็คความถูกต้องของข้อมูลที่กรอก</Text>
              <View style={{flexDirection:'row',justifyContent:'flex-end'}}>
                <TouchableOpacity style={{paddingHorizontal:15,}} onPress={() => {this.props.onCancel()}}>
                  <Text style={{color:'#00000040',fontSize: 14,}}>Cancel</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{paddingHorizontal:15}} onPress={() => {this.props.onOk && this.props.onOk()}}>
                  <Text style={{color:'#2C7C0B',fontSize: 14,}}>OK</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}