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';
import {WebView} from 'react-native-webview';
import {Color} from "../../config/Color";
import Toast from "react-native-root-toast";

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


export default class HelpScreen extends BaseScreen {
    sizeHelp = 10;
    static navigatorStyle = {
        navBarBackgroundColor: Color.primaryColor,
        statusBarColor: Color.primaryDarkColor,
        navBarTextColor: '#FFFFFF',
        navBarButtonColor: '#FFFFFF'

    };

    static navigationOptions = () => {
        return {
            drawerLabel: () => null,
            headerTitle: I18n.t('HELP'),
            headerTintColor: 'white',
            headerStyle: {
                backgroundColor: Color.primaryColor,
                marginTop: 23,
                color: 'white'
            },
            headerTitleStyle: {
                color: "white"
            },
            title: I18n.t('HELP')
        }
    };

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

        Toast.show("Faites glisser votre doigt de la droite vers la gauche pour avancer les pages", {
            duration: Toast.durations.LONG,
            position: Toast.positions.BOTTOM,
            backgroundColor: Color.primaryColor,
            shadow: true,
            animation: true,
            hideOnPress: true,
            delay: 0,
            onShow: () => {
                // calls on toast\`s appear animation start
            },
            onShown: () => {
                // calls on toast\`s appear animation end.
            },
            onHide: () => {
                // calls on toast\`s hide animation start.
            },
            onHidden: () => {
                // calls on toast\`s hide animation end.
            }
        });


    }

    render() {
        return (
            <View style={styles.container}>
                <View style={{width: "100%", height: 40, backgroundColor: Color.primaryColor}}>
                    <Text style={{color: "#fff"}}>Faites glisser votre doigt de la droite vers la gauche pour avancer
                        les pages</Text>
                </View>
                <View style={{flex: 1}}>
                    <WebView source={{uri: 'http://city.ilink-app.com:8080/didactitiel-mobile'}}/>
                </View>
            </View>

        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center'
    },
    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)
    }
});