text: 'use strict'
  
  import React, { Component } from 'react'
  import {
      Text,
      TouchableOpacity,
      View,
      StyleSheet,
      Dimensions,
      Modal,
      TouchableWithoutFeedback,
      TextInput,
      Alert
  } from 'react-native'
  
  import StyleVars from '../styles/StyleVars'
  import FirebaseRequest from '../Firebase/FirebaseRequest'
  
  
  const dismissKeyboard = require("dismissKeyboard")
  
  const windowWidth = Dimensions.get("window").width
  const windowHeight = Dimensions.get("window").height
  
  export default class DeleteCommentModal extends Component {
  
      constructor(props) {
          super(props)
  
          this.state = {
              deletingComment: false
          }
      }
  
      deleteComment() {
  
          this.setState({
              deletingComment: true
          })
  
          FirebaseRequest.removeCommentFromPin(this.props.pinID, this.props.commentID)
              .then(() => {
                  this.setState({
                      deletingComment: false
                  })
                  this.props.hideModals()
              })
              .catch((err) => {
                  Alert.alert('', 'Não foi possível deletar o comentáro.',
                      [
                          {
                              text: 'Ok', onPress: () => { }
                          }
                      ],
                      { cancelable: false }
                  )
                  this.setState({
                      deletingComment: false
                  })
              })
  
      }
  
  
      render() {
          return (
              <Modal
                  animationType={"slide"}
                  transparent={true}
                  visible={this.props.visible}
                  onRequestClose={() => { }}
              >
                  <TouchableWithoutFeedback
                      onPress={() => this.props.hideModals()}
                  >
                      <View style={styles.modalContainer}>
                          <TouchableWithoutFeedback
                              onPress={() => dismissKeyboard()}>
                              <View style={styles.innerModalContainer}>
                                  <View style={[styles.modalHeader, { backgroundColor: this.props.headerColor }]}>
                                      <View style={styles.modalHeaderTextContainer}>
                                          <Text style={styles.modalHeaderText}>Deletar Comentário</Text>
                                      </View>
                                  </View>
                                  <View style={styles.textContainer}>
                                      <Text style={styles.modalText}>Deseja mesmo deletar este comentário?</Text>
                                  </View>
                                  <View style={styles.buttomContainer}>
                                      <TouchableOpacity
                                          activeOpacity={0.5}
                                          style={styles.sendButtom}
                                          onPress={() => this.deleteComment()}
                                      >
                                          <Text style={styles.modalFooterText}>{this.state.deletingComment ? 'Deletando...' : 'Deletar'}</Text>
                                      </TouchableOpacity>
                                  </View>
                                  <View style={[styles.modalFooter, { backgroundColor: this.props.headerColor }]}>
                                      <TouchableOpacity
                                          activeOpacity={0.5}
                                          onPress={() => this.props.hideModals()}
                                      >
                                          <Text style={styles.modalFooterText}>Sair</Text>
                                      </TouchableOpacity>
                                  </View>
                              </View>
                          </TouchableWithoutFeedback>
                      </View>
                  </TouchableWithoutFeedback>
              </Modal>
          )
      }
  
  }
  
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          backgroundColor: StyleVars.Colors.listViewBackground,
      },
      modalContainer: {
          flex: 1,
          justifyContent: 'center',
          padding: 30,
          backgroundColor: "rgba(0,0,0,0.5)"
      },
      modalTextContainerLight: {
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
          paddingVertical: 10,
      },
      fromContainer: {
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: StyleVars.Colors.secondary,
          borderRadius: 5,
          paddingHorizontal: 10,
          paddingVertical: 5,
          width: windowWidth * 0.5,
          marginLeft: 20
      },
      modalTextContainerDark: {
          backgroundColor: StyleVars.Colors.secondary,
          flexDirection: 'row',
          paddingVertical: 5,
          paddingHorizontal: 10
      },
      modalHeader: {
          backgroundColor: StyleVars.Colors.secondary,
          flexDirection: 'row',
          borderTopLeftRadius: 10,
          borderTopRightRadius: 10,
          justifyContent: 'center'
      },
      modalHeaderTextContainer: {
          justifyContent: 'center',
          alignItems: 'center',
          paddingVertical: 10
      },
      modalHeaderText: {
          color: 'white',
          fontSize: 20
      },
      modalText: {
          color: 'white',
          fontSize: 16,
          textAlign: 'center',
          marginBottom: 10,
          marginTop: 5
      },
      innerModalContainer: {
          backgroundColor: StyleVars.Colors.primary,
          borderRadius: 10,
          marginBottom: 30
      },
      modalFooter: {
          backgroundColor: StyleVars.Colors.secondary,
          flexDirection: 'row',
          justifyContent: 'space-between',
          paddingVertical: 10,
          paddingHorizontal: 10,
          borderBottomLeftRadius: 10,
          borderBottomRightRadius: 10
      },
      modalFooterText: {
          color: 'white',
          fontSize: 18
      },
      messageTextContainer: {
          flexDirection: 'row',
          paddingVertical: 20,
          paddingHorizontal: 10,
          backgroundColor: StyleVars.Colors.secondary,
          borderRadius: 10,
          marginLeft: 10,
          marginRight: 10,
          marginTop: 10,
          marginBottom: 10,
          height: windowHeight * 0.2
      },
      buttomContainer: {
          alignItems: 'center',
          justifyContent: 'center'
      },
      sendButtom: {
          backgroundColor: 'darkred',
          borderRadius: 5,
          paddingVertical: 5,
          width: windowWidth * 0.7,
          marginTop: 10,
          marginBottom: 20,
          alignItems: 'center'
      },
      input: {
          flex: 1,
          color: 'white',
          fontSize: 18,
          paddingHorizontal: 5
      },
      adoptionIntentAdviceText: {
          color: 'white',
          textAlign: 'center',
          fontSize: 12
      },
      textContainer: {
          alignItems: 'center',
          justifyContent: 'center',
          paddingHorizontal: 10,
          paddingVertical: 15
      },
  
  })
  