import React from 'react';
// Redux
import { Provider } from 'react-redux';
import { store } from './App/Store/ConfigureStore';
// Deps
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { TouchableOpacity, View, Image, Text, TextInput, StyleSheet, Alert } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';
import FlashMessage, { showMessage } from 'react-native-flash-message';
import * as SplashScreen from 'expo-splash-screen';
// i18n
import i18n from "./I18n";
// FileSytem
import * as FileSystem from 'expo-file-system';
// Controllers
import SyncController from './App/Controllers/SyncController';
// Views
import InstallScreen from './App/Views/InstallScreen';
import LoginScreen from './App/Views/LoginScreen';
import SyncScreen from './App/Views/SyncScreen';
import HomeScreen from './App/Views/HomeScreen';
import DirectoriesScreen from './App/Views/DirectoriesScreen';
import PDFScreen from './App/Views/PDFScreen';
import VideoScreen from './App/Views/VideoScreen';
import OnlyVideosScreen from './App/Views/OnlyVideosScreen';
import ContactScreen from './App/Views/ContactScreen';
import ContactDetailsScreen from './App/Views/ContactDetailsScreen';
import SearchScreen from "./App/Views/SearchScreen";
import MySpaceScreen from './App/Views/MySpaceScreen';
// Style
import styles from './Resources/Styles/NavigationStyle';

SplashScreen.preventAutoHideAsync(); //Keep

store.dispatch({ type: 'INIT' });
store.dispatch({ type: 'INIT_LOCALE' });
store.dispatch({ type: 'INIT_USERS' });

const Stack = createNativeStackNavigator();

class App extends React.Component {
  state = {
    isSetup: false,
    isLogged: false,
    searchTxt: '',
    sendEmail: '',
    mainColor: ''
  };

  componentDidMount() {
    const unsubscribe = store.subscribe(this.handleChange.bind(this));
    this.setState({
      isSetup: store.getState().app.isSetup,
      isLogged: store.getState().app.logged,
      mainColor: store.getState().app.mainColor
    });
  }

  handleChange() {
    this.setState({
      isSetup: store.getState().app.isSetup,
      isLogged: store.getState().app.logged,
      mainColor: store.getState().app.mainColor
    }); // to force re-rendering
    console.log("state changed")
  }

  render() {
    return (
      <Provider store={store}>
        <NavigationContainer>
          <Stack.Navigator initialRouteName="HomeScreen">
            {this.state.isSetup === false &&
              <Stack.Screen
                name="InstallScreen"
                component={InstallScreen}
                options={(navigation, route) => ({
                  headerTitle: () => this.LogoTitle(navigation, i18n.t('install.installation'), false),
                  headerRight: () => (
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                      <TouchableOpacity
                        onPress={() => {
                          store.dispatch({ type: 'EDIT_LOCALE' });
                        }}
                        style={{ marginRight: 15 }}>
                        <Image source={this.renderFlag()} style={{ width: 25, height: 25 }} />
                      </TouchableOpacity>
                    </View>
                  ),
                })}
              />
            }
            {this.state.isLogged === false ? (
              <Stack.Screen
                name="LoginScreen"
                component={LoginScreen}
                options={(navigation, route) => ({
                  headerTitle: () => this.LogoTitle(navigation, i18n.t('global.login'), false),
                  headerRight: () => (
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                      <TouchableOpacity
                        onPress={() => {
                          store.dispatch({ type: 'EDIT_LOCALE' });
                        }}
                        style={{ marginRight: 15 }}>
                        <Image source={this.renderFlag()} style={{ width: 25, height: 25 }} />
                      </TouchableOpacity>
                    </View>
                  ),
                })}
              />
            ) : (
                <Stack.Screen
                name="HomeScreen"
                component={HomeScreen}
                options={(navigation, route) => ({
                  headerTitle: () => this.LogoTitle(navigation, i18n.t('global.home')),
                  headerRight: () => (
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                      <View style={{ flexDirection: 'row', marginRight: 50 }}>
                        <TextInput
                          style={{ ...styles.searchInput, borderColor: this.state.mainColor }}
                          placeholder={i18n.t('global.search')}
                          value={this.state.searchTxt}
                          onChangeText={(text) => this.setState({ searchTxt: text })}
                        />
                        <TouchableOpacity
                          style={{ ...styles.btnSearch, backgroundColor: this.state.mainColor }}
                          onPress={() => {
                          if (this.state.searchTxt.length > 0) {
                            navigation.navigation.navigate('SearchScreen', {
                              needle: this.state.searchTxt,
                              onlyVideos: false,
                            });
                            this.setState({ searchTxt: '' });
                          }
                        }}>
                          <Icon name={'search'} size={20} color={'white'} />
                        </TouchableOpacity>
                      </View>
                      <TouchableOpacity
                        onPress={() => {
                          store.dispatch({ type: 'EDIT_LOCALE' });
                        }}
                        style={{ marginRight: 25 }}>
                        <Image source={this.renderFlag()} style={{ width: 25, height: 25 }} />
                      </TouchableOpacity>
                      {store.getState().app.ShowIsActive === '1' && (
                        <TouchableOpacity
                          onPress={() => navigation.navigation.navigate('MySpaceScreen')}
                          style={{ marginRight: 25 }}>
                          <Icon name="user-circle" size={25} />
                        </TouchableOpacity>
                      )}
                      <TouchableOpacity
                        onPress={() =>
                          navigation.navigation.navigate('SyncScreen')
                        }
                        style={{ marginRight: 25 }}>
                        <Icon name="sync-alt" size={20} />
                      </TouchableOpacity>
                      <TouchableOpacity
                        onPress={() => {
                          store.dispatch({ type: 'SET_CURRENT_USER', data: false });
                        }}
                        style={{ marginRight: 25 }}>
                        <Icon name="sign-out-alt" size={20} />
                      </TouchableOpacity>
                    </View>
                  ),
                })}
                />
            )}
            <Stack.Screen
              name="SyncScreen"
              component={SyncScreen}
              initialParams={{ forceSync: false }}
              options={(navigation, route) => ({
                headerTitle: () => this.LogoTitle(navigation, i18n.t('global.synchronization'))
              })}
            />
            <Stack.Screen
              name="DirectoriesScreen"
              component={DirectoriesScreen}
              options={(navigation, route) => ({
                headerTitle: () => this.LogoTitle(navigation, i18n.t('app.folders'))
              })}
            />
            <Stack.Screen
              name="OnlyVideosScreen"
              component={OnlyVideosScreen}
              options={(navigation, route) => ({
                headerTitle: () => this.LogoTitle(navigation, i18n.t('global.videos')),
                headerRight: () => (
                  <View style={{ flexDirection: 'row', marginRight: 5 }}>
                    <TextInput style={{ ...styles.searchInput, borderColor: this.state.mainColor }} placeholder={i18n.t('global.search')} value={this.state.searchTxt} onChangeText={(text) => this.setState({ searchTxt: text })} />
                    <TouchableOpacity style={{ ...styles.btnSearch, backgroundColor: this.state.mainColor }} onPress={() => {
                      if (this.state.searchTxt.length > 0) {
                        navigation.navigation.navigate('SearchScreen', {
                          needle: this.state.searchTxt,
                          onlyVideos: true,
                        });
                        this.setState({ searchTxt: '' });
                      }
                    }}>
                      <Icon name={'search'} size={20} color={'white'} />
                    </TouchableOpacity>
                  </View>
                ),
              })}
            />
            <Stack.Screen
              name="VideoScreen"
              component={VideoScreen}
              options={(navigation, route) => ({
                headerTitle: () => this.LogoTitle(navigation, i18n.t('app.video')),
                headerRight: () => this.SendEmail(),
                orientation: 'landscape'
              })}
            />
            <Stack.Screen
              name="PDFScreen"
              component={PDFScreen}
              options={(navigation, route) => ({
                headerTitle: () => this.LogoTitle(navigation, 'PDF'),
                headerRight: () => this.SendEmail()
              })}
            />
            <Stack.Screen
              name="ContactScreen"
              component={ContactScreen}
              options={(navigation, route) => ({
                headerTitle: () => this.LogoTitle(navigation, i18n.t('global.contacts'))
              })}
              initialParams={{ contactAdded: false }}
            />
            <Stack.Screen
              name="ContactDetailsScreen"
              component={ContactDetailsScreen}
              options={(navigation, route) => ({
                headerTitle: () => this.LogoTitle(navigation, i18n.t('app.contact_details'))
              })}
            />
            <Stack.Screen
              name="SearchScreen"
              component={SearchScreen}
              options={(navigation, route) => ({
                headerTitle: () => this.LogoTitle(navigation, i18n.t('app.results_search'))
              })}
            />
            <Stack.Screen
              name="MySpaceScreen"
              component={MySpaceScreen}
              options={(navigation, route) => ({
                headerTitle: () => this.LogoTitle(navigation, i18n.t('app.my_space')),
                headerRight: () => (
                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                    <TouchableOpacity
                      onPress={() => {
                        const folder = store.getState().directories.treeview.filter(tmp => tmp.id === 1);
                        navigation.navigation.navigate('DirectoriesScreen', { folder: folder })
                      }}
                      style={{ marginRight: 15 }}>
                      <Icon name="briefcase" size={20} />
                    </TouchableOpacity>
                  </View>
                ),
              })}
            />
          </Stack.Navigator>
          <FlashMessage position="top" />
        </NavigationContainer>
      </Provider>
    );
  }

  LogoTitle(navigation, title, wantBtn = true) {
    console.log(this.state.isSetup)
    return (
      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        <TouchableOpacity onPress={() => {
          if (wantBtn) {
            navigation.navigation.navigate('HomeScreen')
          }
        }}>
          {this.state.isSetup ? (
            <Image
              style={{ width: 100, height: 50, resizeMode: 'stretch' }}
              source={{ uri: FileSystem.documentDirectory + 'RectangleLogo.png' }}
            />
          ) : (
            <Image
              style={{ width: 100, height: 50, resizeMode: 'stretch' }}
                source={require('./Resources/assets/img/logo.png')}
            />
          )}
        </TouchableOpacity>
        <Text style={{ marginLeft: 10, fontSize: 18 }}>{title}</Text>
      </View>
    );
  }

  SendEmail() {
    return (
      <View style={{ flexDirection: 'row', alignItems: 'center', marginRight: 10 }}>
        <TextInput style={{ ...styles.searchInput, borderColor: this.state.mainColor }} placeholder={i18n.t('global.email')} value={this.state.sendEmail} onChangeText={(text) => this.setState({ sendEmail: text })} />
        <TouchableOpacity style={{ ...styles.btnSearch, backgroundColor: this.state.mainColor }} onPress={() => {
          if (this.state.sendEmail.length > 0) {
            if (Helpers.isEmailValid(this.state.sendEmail)) {
              const email = {
                email: this.state.sendEmail,
                subject: i18n.t('app.file_sharing'),
                message: '',
                documents: JSON.stringify([store.getState().currentOpenedDoc]),
                user_id: store.getState().currentUser.id
              };
              store.dispatch({ type: 'SEND_BROCHURE', data: email });
              showMessage({
                message: i18n.t('global.message_sent') + '.',
                description: i18n.t('global.message_will_be_sent_after_sync') + '.',
                type: 'success',
                duration: 1500,
              });
              this.setState({ sendEmail: '' });
            } else {
              Alert.alert(i18n.t('global.warning') + ' !', i18n.t('error.invalid_email_address') + '.', [
                { text: 'OK' },
              ],
                { cancelable: false },
              );
            }
          }
        }}>
          <Icon name={'paper-plane'} size={20} color={'white'} />
        </TouchableOpacity>
      </View>
    );
  }

  renderFlag() {
    let flag;
    switch (store.getState().locale.locale) {
      case "fr":
        flag = require('./assets/img/flags/fr.png');
        break;
      case "en":
        flag = require('./assets/img/flags/en.png');
        break;
      case "de":
        flag = require('./assets/img/flags/de.png');
        break;
      case "es":
        flag = require('./assets/img/flags/es.png');
        break;
    }
    return flag;
  }

}

export default App;