import React, { Component } from 'react';
import Modal from "react-native-modal";
import { View, Text, Dimensions, StyleSheet, Modal as FullModal } from 'react-native';
import { Image, Icon } from 'react-native-elements';

const { height } = Dimensions.get('screen');
class InAppNotification extends Component {
  render() {
    return (
      <View >
        {
          !this.props.full && <Modal
            isVisible={this.props.isVisible}
          // style={{width:'100%', height:'100%'}}
          >
            <View style={styles.viewSmallStyle}>
              <View style={{ position: 'absolute', right: 0, top: 0, marginRight: 14, marginTop: 14 }}>
                <Icon
                  name='times'
                  type="font-awesome"
                  color='#c7c7c7'
                  onPress={this.props.onCloseFunction}
                />
              </View>
              <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Image
                  source={{ uri: this.props.image }}
                  style={{ borderRadius: 10, width: 140, height: 140 }}
                />
                <Text style={{ paddingTop: 12, fontSize: 20, fontWeight: 'bold' }}>
                  {this.props.notificationTitle}
                </Text>
                <Text style={{ marginTop: 8, textAlign: 'center' }} >{this.props.notificationText}</Text>
              </View>
            </View>
          </Modal >
        }
        {
          this.props.full && <FullModal
            visible={this.props.isVisible}
            animationType="slide"
            // style={{width:'100%', height:'100%'}}
            presentationStyle="fullScreen"
          >
            <View style={{ flex: 1, paddingRight: 20, paddingLeft: 20 }}>
              <View style={{ position: 'absolute', right: 0, top: 0, marginRight: 14, marginTop: 14 }}>
                <Icon
                  name='times'
                  type="font-awesome"
                  color='#c7c7c7'
                  onPress={this.props.onCloseFunction}
                />
              </View>
              <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Image
                  source={{ uri: this.props.image }}
                  style={{ borderRadius: 10, width: 140, height: 140 }}
                />
                <Text style={{ paddingTop: 12, fontSize: 20, fontWeight: 'bold' }}>
                  {this.props.notificationTitle}
                </Text>
                <Text style={{ marginTop: 8, textAlign: 'center' }} >{this.props.notificationText}</Text>
              </View>
            </View>
          </FullModal >
        }
      </View>

    )
  }
}

const styles = StyleSheet.create({
  viewSmallStyle: {
    height: height / 2,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    borderRadius: 10,
    paddingRight: 20,
    paddingLeft: 20
  }
})

export default (InAppNotification);