import React, { Component } from 'react';
import {
     Platform,
     StyleSheet,
     AppState,
     FlatList,
     ProgressBarAndroid,
     TouchableOpacity,
     Text,
     Image,
     View,
     Animated,
     Linking,
     StatusBar
} from 'react-native';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { responsiveFontSize, responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
import { credrequester } from './../../route.json';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import BaseScreen from './../../screens/BaseScreen'
import Button from 'apsl-react-native-button'
import { readUser } from "../../webservice/AuthApi";
import Calendar from 'react-native-calendario';
let route = require('./../../route.json')
let moment = require('moment-timezone')
let theme = require('./../../utils/theme.json')
import { primary, primaryDark, accent, purpleLight, primaryLight } from './../../utils/theme.json';
import I18n from 'react-native-i18n'
require('./../../utils/Translations')

import { SinglePickerMaterialDialog } from 'react-native-material-dialog';
import { Header } from "react-native-elements";
import { withNavigationFocus } from "react-navigation";
import { Appbar, Paragraph, Menu, Divider, Provider } from 'react-native-paper';
import { videoUrl } from '../../webservice/IlinkConstants.js'
export default class About extends React.Component {
     static navigationOptions = ({ navigation }) => {
          const { routeName } = navigation.state
          return {
               header: null
          }
     };
     render() {
          return (<View style={{ flex: 1, backgroundColor: theme.primary, alignItems: 'center', justifyContent: "space-between" }}>
               <Appbar.Header dark={true} style={{ backgroundColor: theme.primary, width: responsiveWidth(100), marginTop: 20 }}>
                    <Appbar.BackAction
                         onPress={() => { this.props.navigation.pop() }}
                    />
               </Appbar.Header>

               <View style={{ flex: 6, alignItems: "center", justifyContent: "space-evenly" }}>
                    <Image resizeMode="contain" style={{ width: responsiveWidth(50), height: responsiveHeight(20) }} source={require("./../../datas/img/ilinklogo.png")} />
                    <Image resizeMode="contain" style={{ width: responsiveWidth(90) }} source={require("./../../datas/img/icon3.png")} />
                    <Text style={{ color: "white", margin: 10, fontSize: 15, alignSelf: "center" }}>{I18n.t("ABOUT_TEXT")}</Text>

               </View>
               <View style={{ flex: 3 }}>
                    <Button onPress={() => { Linking.openURL(videoUrl) }} style={{ width: responsiveWidth(40), backgroundColor: "white", borderRadius: responsiveWidth(20), alignSelf: "center", borderColor: "white" }} textStyle={{ color: theme.primary }}>{I18n.t('SEE_VIDEO')}</Button>
                    <Button style={{ width: responsiveWidth(40), backgroundColor: "transparent", borderRadius: responsiveWidth(20), alignSelf: "center", borderColor: "white" }} textStyle={{ color: "white" }}><View style={{ justifyContent: "center", alignContent: "center" }}><Text style={{ color: "white" }}>{I18n.t('SEE_TUTO')}</Text></View></Button>
               </View>
               <View style={{ flexDirection: "row", flex: 0.3, width: responsiveWidth(95), height: responsiveHeight(100), justifyContent: "space-between", alignItems: "stretch" }}>
                    <Text style={{ color: "white", fontWeight: "bold" }}>Version 1.0.0</Text>
                    <Text style={{ color: "white" }}>Copyright <Text style={{ fontWeight: "bold" }}>iLinkWorld</Text> all reserved</Text>
               </View>
          </View>)
     }
}