import React from 'react';
import { View, StyleSheet, ImageBackground, TouchableOpacity, Text, Image } from 'react-native';
import { connect } from 'react-redux';
import NetInfo from '@react-native-community/netinfo';
import Sync from '../Controllers/Sync';
import * as SplashScreen from 'expo-splash-screen';
import i18n from "../I18n";

function mapStateToProps(state) {
  return {
    directories: state.directories,
    locale: state.locale,
  };
}

class HomeScreen extends React.Component {
  state = {
    lastSyncCall: '2020-02-12',
  };
  componentDidMount() {
    this.props.dispatch({ type: 'INIT' });
    SplashScreen.hideAsync();
  }

  unsubscribe() {
    NetInfo.addEventListener(state => {
      if (state.isConnected === true) {
        let seconds =
          Math.abs(new Date(this.state.lastSyncCall) - Date.now()) / 1000;
        //console.log(seconds);
        if (seconds > 30) {
          this.setState({ lastSyncCall: Date.now() });
          Sync.needSync(this.openSync.bind(this));
        }
      }
    });
  }

  openSync() {
    this.props.navigation.navigate('SyncScreen', { isInstalled: true });
  }

  openFolder(folderID) {
    const folder = this.props.directories.filter(tmp => tmp.id === folderID);
    this.props.navigation.navigate('DirectoriesScreen', { folder: folder });
  }

  render() {
    i18n.locale = this.props.locale;
    this.unsubscribe();
    return (
      <ImageBackground source={require('../assets/img/background.jpg')} style={{ width: '100%', height: '100%' }}>
        <View style={styles.container}>
          <TouchableOpacity onPress={() => this.openFolder(2)} style={styles.button}>
            <Image source={require('../assets/img/guillemets.png')} style={styles.btnImg} />
            <Text style={styles.btnTxt}>{i18n.t('home_s.1')}</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this.openFolder(3)} style={styles.button}>
            <Image source={require('../assets/img/guillemets.png')} style={styles.btnImg} />
            <Text style={styles.btnTxt}>{i18n.t('home_s.2')}</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this.props.navigation.navigate('OnlyVideosScreen')} style={styles.button}>
            <Image source={require('../assets/img/guillemets.png')} style={styles.btnImg} />
            <Text style={styles.btnTxt}>{i18n.t('global.videos')}</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => this.props.navigation.navigate('ContactScreen')} style={styles.button}>
            <Image source={require('../assets/img/guillemets.png')} style={styles.btnImg} />
            <Text style={styles.btnTxt}>{i18n.t('global.contacts')}</Text>
          </TouchableOpacity>
        </View>
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'flex-end',
    justifyContent: 'center',
  },
  text: {
    height: 40,
    width: 300,
    borderColor: 'grey',
    borderWidth: 1,
    marginBottom: 20,
  },
  button: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    marginBottom: 20,
    marginRight: 50,
    width: 400,
    height: 80,
    borderRadius: 10
  },
  btnTxt: {
    fontSize: 20
  },
  btnImg: {
    position: 'absolute',
    left: 15,
    height: 50,
    width: 50,
    resizeMode: 'stretch'
  }
});

export default connect(mapStateToProps)(HomeScreen);