import React, {Component} from 'react';
import Button from 'apsl-react-native-button';
import {StyleSheet, View, Text, Image, BackHandler, Alert} from 'react-native';
import BaseScreen from './../BaseScreen'
import {responsiveWidth, responsiveHeight} from 'react-native-responsive-dimensions'
import {theme} from "../BaseScreen";
import I18n from 'react-native-i18n'

const route = require('./../../route.json');
let rootHelp = './../../assets/img/slider/slide';


export default class HelpMenu extends BaseScreen {
    sizeHelp = 10;
    static navigatorStyle = {
        drawUnderNavBar: true,
        navBarHidden: true,
        drawUnderStatusBar: false,
        statusBarHidden: true,
        statusBarTextColorScheme: 'light',
    };

    constructor(props) {
        super(props, true);
        this.state = {
            items: []
        }

    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.viewlogo}>
                    <Image
                        style={styles.img_style}
                        source={require('../../assets/img/icon3.png')}/>
                    <View style={{alignItems: 'center'}}>
                    </View>
                </View>
                <Text style={styles.title}>{I18n.t('GUIDE_TITLE')}</Text>

                <Button textStyle={styles.btnTextStyle}
                        style={styles.btnStyle}
                        onPress={() => {
                            //this.props.navigation.push(route.help, {type:0})
                            Alert.alert(I18n.t("TITLE_HELP_SOON"),
                                I18n.t("MISSING_AUTORISATION_LOCATION"),
                                [{
                                    text: "Ok", onPress: () => {
                                        //BackHandler.exitApp()
                                    }
                                }], {cancelable: false}
                            );
                        }}>{I18n.t('GUIDE_USER_SIMPLE')}</Button>
                <Button textStyle={styles.btnTextStyle}
                        style={styles.btnStyle}
                        onPress={() => {
                            this.props.navigation.push(route.helpScreen);
                            /*                              Alert.alert(I18n.t("TITLE_HELP_SOON"),
                                                               I18n.t("MISSING_AUTORISATION_LOCATION"),
                                                               [{
                                                                    text: "Ok", onPress: () => {
                                                                         //BackHandler.exitApp()
                                                                    }
                                                               }], { cancelable: false }
                                                          );*/
                        }}>{I18n.t('GUIDE_AGENT')}</Button>
            </View>

        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: theme.primary
    },
    title: {
        fontSize: 20,
        alignSelf: "center",
        fontWeight: 'bold',
        color: 'white'
    },
    btnStyle: {
        borderColor: 'transparent',
        backgroundColor: theme.primaryDark,
        height: 48,
        marginRight: responsiveWidth(5),
        marginLeft: responsiveWidth(5)

    },
    btnTextStyle: {
        fontSize: 18,
        color: 'white',
        fontWeight: 'bold'
    },
    viewlogo: {
        width: responsiveWidth(100),
        flexDirection: 'row',
        marginBottom: 20,
        justifyContent: 'center',
        alignItems: 'center'
    },
    img_style: {
        resizeMode: 'contain',
        width: responsiveWidth(90),
        height: responsiveHeight(16), // Delete this line if the image size sucks and change the width and the height of icon3.png to 257 x 112
    }
});