import 'react-native-gesture-handler';
import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
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';

import LoginScreen from './Views/Login';
import HomeScreen from './Views/Home';
import DirectoriesScreen from './Views/Directories';
import VideoScreen from './Views/Video';
import PDFScreen from './Views/PDF';
import SyncScreen from './Views/Sync';
import ContactScreen from './Views/Contact';
import ContactDetailsScreen from './Views/ContactDetails';
import OnlyVideosScreen from './Views/OnlyVideos';
import SearchScreen from "./Views/Search";
import MySpaceScreen from './Views/MySpace';

import UsersModel from './Models/Users';
import DirectoriesModel from './Models/Directories';
import DocumentsModel from './Models/Documents';
import ContactsModel from './Models/Contacts';
import SendBrochureModel from './Models/SendBrochure';
import CommonModel from './Models/Common';

import Sync from './Controllers/Sync';
import Helpers from "./Controllers/Helpers";
import i18n from "./I18n";

SplashScreen.preventAutoHideAsync();

const initialState = {
  locale: 'fr',
  users: {},
  directories: {},
  documents: {},
  contacts: {},
  syncVersion: 0,
  logged: undefined,
  currentUser: {},
  currentOpenedDoc: {},
  ShowIsActive: 0,
};

function reducer(state = initialState, action) {
  //console.log('reducer', state, action);
  //console.log('DISPATCH');

  switch (action.type) {
    case 'INIT':
      let docs = DocumentsModel.getAll(DirectoriesModel.getAll(
        state.currentUser.role,
        state.currentUser.authorizedFolders,
        false,
        state.locale
      ));
      return {
        ...state,
        users: UsersModel.getAll(),
        directories: DirectoriesModel.getAll(
          state.currentUser.role,
          state.currentUser.authorizedFolders,
          true,
          state.locale
        ),
        documents: docs.filter(item => item.lang === state.locale),
        contacts: ContactsModel.getByUser(state.currentUser.id),
        ShowIsActive: CommonModel.get('ShowIsActive')['value'],
      };
    case 'INIT_USERS':
      return {
        ...state,
        users: UsersModel.getAll(),
      };
    case 'SET_CURRENT_USER':
      return {
        ...state,
        currentUser: JSON.parse(action.data),
      };
    case 'SET_LOGGED':
      if (action.data === false) {
        CommonModel.delete('isLogged');
      }
      return {
        ...state,
        logged: action.data,
      };
    case 'UPDATE_LOCALE':
      let nxt;
      if (action.data === undefined) {
        const availableLocales = ['fr', 'en', 'de'];
        if (availableLocales.indexOf(i18n.locale) === availableLocales.length - 1) {
          nxt = availableLocales[0];
        } else {
          nxt = availableLocales[availableLocales.indexOf(i18n.locale) + 1];
        }
      } else {
        nxt = action.data;
      }
      i18n.locale = nxt;
      CommonModel.update({ key: 'locale', value: nxt });
      let docsL = DocumentsModel.getAll(DirectoriesModel.getAll(
        state.currentUser.role,
        state.currentUser.authorizedFolders,
        false,
        nxt
      ));
      return {
        ...state,
        locale: nxt,
        directories: DirectoriesModel.getAll(
          state.currentUser.role,
          state.currentUser.authorizedFolders,
          true,
          nxt
        ),
        documents: docsL.filter(item => item.lang === nxt),
      };
    case 'SET_CURRENT_OPENED_DOC':
      return {
        ...state,
        currentOpenedDoc: action.data
      };
    case 'UPDATE_VERSION':
      return {
        ...state,
        syncVersion: action.data,
      };
    case 'UPDATE_SHOW_IS_ACTIVE':
      Sync.updateShowIsActive(action.data);
      return {
        ...state,
        ShowIsActive: action.data,
      };
    case 'UPDATE_CONTACT':
      ContactsModel.update(action.data);
      return {
        ...state,
        contacts: ContactsModel.getByUser(state.currentUser.id),
      };
    case 'ADD_CONTACT':
      ContactsModel.add(action.data);
      return {
        ...state,
        contacts: ContactsModel.getByUser(state.currentUser.id),
      };
    case 'DELETE_CONTACT':
      ContactsModel.delete(action.data);
      return {
        ...state,
        contacts: ContactsModel.getByUser(state.currentUser.id),
      };
    case 'SEND_BROCHURE':
      SendBrochureModel.add(action.data);
      return state;
    default:
      return state;
  }
}

const store = createStore(reducer);
const Stack = createNativeStackNavigator();

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

class App extends React.Component {
  state = {
    logged: false,
    searchTxt: '',
    sendEmail: '',
    ShowIsActive: '0'
  };

  componentDidMount(): void {
    const unsubscribe = store.subscribe(this.handleChange.bind(this));
    if (Sync.isInstalled() && Sync.isLogged()) {
      store.dispatch({
        type: 'SET_CURRENT_USER',
        data: CommonModel.get('isLogged').value,
      });
      store.dispatch({ type: 'SET_LOGGED', data: true });
    }
    const savedLocale = CommonModel.get('locale');
    if (savedLocale !== undefined && savedLocale !== false) {
      store.dispatch({ type: 'UPDATE_LOCALE', data: savedLocale.value });
    }
  }

  handleChange() {
    const logged = store.getState().logged;
    if (logged === false) {
      CommonModel.delete('isLogged');
    }
    if (logged !== undefined) {
      this.setState({ logged: logged });
    }
    this.setState({ ShowIsActive: store.getState().ShowIsActive });
  }

  LogoTitle(title) {
    return (
      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        <Image
          style={{ width: 100, height: 50, resizeMode: 'stretch' }}
          source={require('./assets/img/logo.png')}
        />
        <Text style={{ marginLeft: 10, fontSize: 18 }}>{title}</Text>
      </View>
    );
  }

  SendEmail() {
    return (
      <View style={{ flexDirection: 'row', alignItems: 'center', marginRight: 10 }}>
        <TextInput style={styles.searchInput} placeholder={i18n.t('global.email')} value={this.state.sendEmail} onChangeText={(text) => this.setState({ sendEmail: text })} />
        <TouchableOpacity style={styles.btnSearch} 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>
    );
  }

  render() {
    const savedLocale = CommonModel.get('locale');
    let locale;
    if (savedLocale !== undefined) {
      locale = savedLocale.value;
    } else {
      locale = store.getState().locale;
    }
    let flag;
    switch (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 (
      <Provider store={store}>
        <NavigationContainer>
          <Stack.Navigator>
            {this.state.logged === false ? (
              <Stack.Screen
                name="LoginScreen"
                component={LoginScreen}
                options={(navigation, route) => ({
                  headerTitle: () => this.LogoTitle(i18n.t('global.login')),
                  headerRight: () => (
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                      <TouchableOpacity
                        onPress={() => {
                          store.dispatch({ type: 'UPDATE_LOCALE' });
                          this.setState({ state: this.state }); // to force re-rendering
                        }}
                        style={{ marginRight: 15 }}>
                        <Image source={flag} style={{ width: 25, height: 25 }} />
                      </TouchableOpacity>
                    </View>
                  ),
                })}
              />
            ) : (
              <Stack.Screen
                name="HomeScreen"
                component={HomeScreen}
                options={(navigation, route) => ({
                  headerTitle: () => this.LogoTitle(i18n.t('global.home')),
                  headerRight: () => (
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                      <View style={{ flexDirection: 'row', marginRight: 50 }}>
                        <TextInput style={styles.searchInput} placeholder={i18n.t('global.search')} value={this.state.searchTxt} onChangeText={(text) => this.setState({ searchTxt: text })} />
                        <TouchableOpacity style={styles.btnSearch} 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: 'UPDATE_LOCALE' });
                        }}
                        style={{ marginRight: 15 }}>
                        <Image source={flag} style={{ width: 25, height: 25 }} />
                      </TouchableOpacity>
                      {this.state.ShowIsActive === '1' && (
                        <TouchableOpacity
                          onPress={() => navigation.navigation.navigate('MySpaceScreen')}
                          style={{ marginRight: 15 }}>
                          <Icon name="user-circle" size={25} />
                        </TouchableOpacity>
                      )}
                      <TouchableOpacity
                        onPress={() =>
                          navigation.navigation.navigate('SyncScreen', {
                            isInstalled: true,
                          })
                        }
                        style={{ marginRight: 15 }}>
                        <Icon name="sync-alt" size={20} />
                      </TouchableOpacity>
                      <TouchableOpacity
                        onPress={() => {
                          store.dispatch({ type: 'SET_LOGGED', data: false });
                        }}
                        style={{ marginRight: 15 }}>
                        <Icon name="sign-out-alt" size={20} />
                      </TouchableOpacity>
                    </View>
                  ),
                })}
              />
            )}
            <Stack.Screen
              name="SyncScreen"
              component={SyncScreen}
              options={{ headerTitle: () => this.LogoTitle(i18n.t('global.synchronization')) }}
            />
            <Stack.Screen
              name="DirectoriesScreen"
              component={DirectoriesScreen}
              options={{ headerTitle: () => this.LogoTitle(i18n.t('app.folders')) }}
            />
            <Stack.Screen
              name="OnlyVideosScreen"
              component={OnlyVideosScreen}
              options={(navigation, route) => ({
                headerTitle: () => this.LogoTitle(i18n.t('global.videos')),
                headerRight: () => (
                  <View style={{ flexDirection: 'row', marginRight: 5 }}>
                    <TextInput style={styles.searchInput} placeholder={i18n.t('global.search')} value={this.state.searchTxt} onChangeText={(text) => this.setState({ searchTxt: text })} />
                    <TouchableOpacity style={styles.btnSearch} 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(i18n.t('app.video')),
                headerRight: () => this.SendEmail()
              })}
            />
            <Stack.Screen
              name="PDFScreen"
              component={PDFScreen}
              options={(navigation, route) => ({
                headerTitle: () => this.LogoTitle('PDF'),
                headerRight: () => this.SendEmail()
              })}
            />
            <Stack.Screen
              name="ContactScreen"
              component={ContactScreen}
              options={{ headerTitle: () => this.LogoTitle(i18n.t('global.contacts')) }}
              initialParams={{ contactAdded: false }}
            />
            <Stack.Screen
              name="ContactDetailsScreen"
              component={ContactDetailsScreen}
              options={{ headerTitle: () => this.LogoTitle(i18n.t('app.contact_details')) }}
            />
            <Stack.Screen
              name="SearchScreen"
              component={SearchScreen}
              options={{ headerTitle: () => this.LogoTitle(i18n.t('app.results_search')) }}
            />
            <Stack.Screen
              name="MySpaceScreen"
              component={MySpaceScreen}
              options={(navigation, route) => ({
                headerTitle: () => this.LogoTitle(i18n.t('app.my_space')),
                headerRight: () => (
                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                    <TouchableOpacity
                      onPress={() => {
                        const folder = store.getState().directories.filter(tmp => tmp.id === 131);
                        navigation.navigation.navigate('DirectoriesScreen', { folder: folder })
                      }}
                      style={{ marginRight: 15 }}>
                      <Icon name="briefcase" size={20} />
                    </TouchableOpacity>
                  </View>
                ),
              })}
            />
          </Stack.Navigator>
          <FlashMessage position="top" />
        </NavigationContainer>
      </Provider>
    );
  }
}

const styles = StyleSheet.create({
  searchInput: {
    borderWidth: 1,
    borderColor: '#ce3029',
    width: 200,
    paddingLeft: 20,
  },
  btnSearch: {
    width: 50,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ce3029'
  }
});

export default App;