import React from 'react';
import {
  Image,
  ImageBackground,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
// Common Styles
import commonStyles from '../../Resources/CommonStyles';
// Redux
import {connect} from 'react-redux';
import {initContact} from '../Store/Actions/contacts';
import {initDirectories} from '../Store/Actions/directories';
import {initDocuments} from '../Store/Actions/documents';
// SplashScreen
import * as SplashScreen from 'expo-splash-screen';
// Style
import styles from '../../Resources/Styles/HomeStyle';
// Translations
import i18n from '../../I18n';
// FileSytem
import * as FileSystem from 'expo-file-system';
// NetInfo
import NetInfo from '@react-native-community/netinfo';
// Controller
import SyncController from '../Controllers/SyncController';

function mapStateToProps(state) {
  return {
    btns: state.app.HomeBtns,
    directories: state.directories,
    locale: state.locale.locale,
    currentUser: state.app.currentUser,
  };
}

const mapDispatchToProps = dispatch => {
  return {
    initBtns: () => dispatch({type: 'INIT_HOME_BTNS'}),
    initDocuments: (lang, directories) =>
      dispatch(initDocuments(lang, directories)),
    initContact: currentUser => dispatch(initContact(currentUser)),
    initDirectories: (lang, user) => dispatch(initDirectories(lang, user)),
  };
};

class HomeScreen extends React.Component {
  state = {
    lastSyncCall: '1970-01-01',
  };

  componentDidMount() {
    if (!SyncController.isInstalled()) {
      return this.openSync();
    }
    this.props.initBtns();
    this.props.initContact(this.props.currentUser);
    this.props.initDirectories(this.props.locale, this.props.currentUser);
    this.props.initDocuments(this.props.locale, this.props.directories.global);

    SplashScreen.hideAsync();
  }

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

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

  render() {
    i18n.locale = this.props.locale;
    return (
      <ImageBackground
        source={{uri: FileSystem.documentDirectory + 'BackgroundImage.png'}}
        style={commonStyles.background}
        resizeMode="cover">
        <View style={styles.container}>
          {this.renderBtns()}
          <TouchableOpacity
            key={'OnlyVideos'}
            onPress={() => {
              this.props.initDocuments(
                this.props.locale,
                this.props.directories.global,
              );
              this.props.navigation.navigate('OnlyVideosScreen');
            }}
            style={styles.button}>
            <Image
              source={{
                uri: FileSystem.documentDirectory + 'HomeButtonImage.png',
              }}
              style={styles.btnImg}
            />
            <Text style={styles.btnTxt}>{i18n.t('global.videos')}</Text>
          </TouchableOpacity>
          <TouchableOpacity
            key={'Contacts'}
            onPress={() => this.props.navigation.navigate('ContactScreen')}
            style={styles.button}>
            <Image
              source={{
                uri: FileSystem.documentDirectory + 'HomeButtonImage.png',
              }}
              style={styles.btnImg}
            />
            <Text style={styles.btnTxt}>{i18n.t('global.contacts')}</Text>
          </TouchableOpacity>
        </View>
      </ImageBackground>
    );
  }

  renderBtns() {
    let locale = this.props.locale;
    let objBtns = this.props.btns;
    let array = Object.keys(objBtns).map(function (key) {
      return objBtns[key];
    });
    return array.map((item, index) => {
      let names = JSON.parse(item.name);
      let name = locale in names ? names[locale] : names.fr;
      return (
        <TouchableOpacity
          key={index}
          onPress={() => this.openFolder(item.id)}
          style={styles.button}>
          <Image
            source={{uri: FileSystem.documentDirectory + 'HomeButtonImage.png'}}
            style={styles.btnImg}
          />
          <Text style={styles.btnTxt}>{name}</Text>
        </TouchableOpacity>
      );
    });
  }

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

export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen);