import React, { Component } from 'react'
import { Button } from 'react-native-elements'
import { View, Text, Linking } from 'react-native'
import { connect } from 'react-redux'

import {
  PORTAL_DENUNCIAS_URL,
  TUTORIAL_AIF_URL,
  TUTORIAL_APP
} from '../../constants'

import css from './style'
// AIP Movil

class Ayuda extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: 'Ayuda',
    headerStyle: css.headerStyle,
    headerTitleStyle: css.headerTitleStyle,
    headerLeft:
      <Button
        icon={{ name: 'menu', size: 27, color: 'white' }}
        buttonStyle={{ backgroundColor: 'transparent' }}
        onPress={() => navigation.toggleDrawer()}
      />
  });
  myHandlePress = (link) => () => {
    Linking.openURL(link)
  }


  render() {
    return (
      <View style={[css.pane, css.distribute]}>
        <View>
          <Text style={css.label}>
            ¿Quieres saber más?
          </Text>
          <Button
            buttonStyle={css.btn}
            onPress={this.myHandlePress(TUTORIAL_AIF_URL)}
            title="Ver Tutorial de Información Pública"
          />
          </View>
        <View>
          <Text style={css.label}>
            Aun no sé como usar la App
          </Text>
          <Button
            buttonStyle={css.btn}
            onPress={this.myHandlePress(TUTORIAL_APP)}
            title="¿Cómo usar la App?"
          />
        </View>
        <View>
          <Text style={css.label}>
            No quiero información... Quiero Denunciar!
          </Text>
          <Button
            buttonStyle={css.btn}
            onPress={this.myHandlePress(PORTAL_DENUNCIAS_URL)}
            title="Ir al Portal de Denuncias"
          />
        </View>
      </View>
    )
  }
}

const mapStateToProps = () => ({
})

const mapDispatchToProps = () => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(Ayuda)