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

Sentry.init({
  dsn: 'https://ab87e8d840324f41873c95b06903b0bf@o4504314935640064.ingest.sentry.io/4504441255886848',
});

Sentry.setContext('app', {
  boUrl: SyncController.getUrlBo(),
});

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: '',
    drawerRef: React.createRef(),
  };

  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');
  }

  navigationView = () => (
    <View style={styles.drawer.container}>
      <View>
        <TouchableOpacity
          onPress={() => {
            this.state.drawerRef.current.closeDrawer();
            store.dispatch({ type: 'EDIT_LOCALE' });
            store.dispatch(
              initDocuments(
                store.getState().locale.locale,
                store.getState().directories.global,
              ),
            );
          }}
          style={styles.drawer.btn}>
          <Image source={this.renderFlag()} style={{ width: 25, height: 25 }} />
          <Text style={styles.drawer.btnText}>
            {i18n.t('global.change_lang')}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            this.state.drawerRef.current.closeDrawer();
            navigate('SyncScreen');
          }}
          style={styles.drawer.btn}>
          <Icon name="sync-alt" size={20} />
          <Text style={styles.drawer.btnText}>{i18n.t('global.sync')}</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            this.state.drawerRef.current.closeDrawer();
            store.dispatch({ type: 'SET_CURRENT_USER', data: false });
          }}
          style={styles.drawer.btn}>
          <Icon name="sign-out-alt" size={20} />
          <Text style={styles.drawer.btnText}>{i18n.t('global.logout')}</Text>
        </TouchableOpacity>
      </View>
      <View>
        <Text style={{ marginBottom: 10 }}>
          Version : {Application.nativeApplicationVersion}
        </Text>
        <Button
          title={i18n.t('global.close')}
          color={this.state.mainColor}
          onPress={() => this.state.drawerRef.current.closeDrawer()}
        />
      </View>
    </View>
  );

  render() {
    return (
      <Provider store={store}>
        <NavigationContainer ref={navigationRef}>
          <DrawerLayoutAndroid
            ref={this.state.drawerRef}
            drawerWidth={300}
            drawerPosition={'right'}
            drawerLockMode={'locked-open'}
            renderNavigationView={this.navigationView}>
            <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>
                        {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('ContactScreen', {
                              action: 'add',
                            })
                          }
                          style={{ marginRight: 25 }}>
                          <Icon name="user-plus" size={20} />
                        </TouchableOpacity>
                        <TouchableOpacity
                          onPress={() => {
                            this.state.drawerRef.current.openDrawer();
                          }}
                          style={{ marginRight: 25 }}>
                          <Icon name="sliders-h" 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" />
          </DrawerLayoutAndroid>
        </NavigationContainer>
      </Provider>
    );
  }

  LogoTitle(navigation, title, wantBtn = true) {
    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 Sentry.wrap(App);