/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import { View, Image, TextInput, TouchableOpacity } from 'react-native';
// Redux
import { Provider } from 'react-redux';
// Store
import { store } from './App/Store/ConfigureStore';
// Navigation
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import CustomNavigation from './Navigation';
// Icons
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
// Translations
import i18n from "./I18n";
// Navigations style
import styles from './Resources/Styles/NavigationStyle';
// Database
import { Setting } from "./Database";
// Views
import InstallScreen from './App/Views/InstallScreen';
import HomeScreen from './App/Views/HomeScreen';
import LoginScreen from './App/Views/LoginScreen';
import SyncScreen from './App/Views/SyncScreen';
// Lang Flags
import flagFR from './Resources/assets/img/flags/fr.png';
import flagEN from './Resources/assets/img/flags/en.png';
import flagDE from './Resources/assets/img/flags/de.png';
import flagES from './Resources/assets/img/flags/es.png';

const Stack = createNativeStackNavigator();

const App = () => {
  state = {
    logged: false,
    searchTxt: '',
    sendEmail: '',
    ShowIsActive: '0'
  };

  const savedLocale = Setting.get('locale');
  let locale;
  if (savedLocale !== undefined) {
    locale = savedLocale.value;
  } else {
    locale = store.getState().app.locale;
  }

  let flag;
  switch (locale) {
    case "fr":
      flag = { uri: Image.resolveAssetSource(flagFR).uri }
      break;
    case "en":
      flag = { uri: Image.resolveAssetSource(flagEN).uri }
      break;
    case "de":
      flag = { uri: Image.resolveAssetSource(flagDE).uri }
      break;
    case "es":
      flag = { uri: Image.resolveAssetSource(flagES).uri }
      break;
  }

  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="SyncScreen"
            component={SyncScreen}
            options={{ headerTitle: () => CustomNavigation.LogoTitle(i18n.t('global.synchronization')) }}
          />
          <Stack.Screen
            name="LoginScreen"
            component={LoginScreen}
            options={(navigation, route) => ({
              headerTitle: () => CustomNavigation.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: () => CustomNavigation.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: '' });
                      }
                    }}>
                      <FontAwesome5 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 }}>
                      <FontAwesome5 name="user-circle" size={25} />
                    </TouchableOpacity>
                  )}
                  <TouchableOpacity
                    onPress={() =>
                      navigation.navigation.navigate('SyncScreen', {
                        isInstalled: true,
                      })
                    }
                    style={{ marginRight: 15 }}>
                    <FontAwesome5 name="sync-alt" size={20} />
                  </TouchableOpacity>
                  <TouchableOpacity
                    onPress={() => {
                      store.dispatch({ type: 'SET_LOGGED', data: false });
                    }}
                    style={{ marginRight: 15 }}>
                    <FontAwesome5 name="sign-out-alt" size={20} />
                  </TouchableOpacity>
                </View>
              )
            })}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
};

export default App;