/* eslint-disable react-native/no-inline-styles */
import React, {Component} from 'react';
import {
  Image,
  PermissionsAndroid,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';
import {
  responsiveFontSize,
  responsiveHeight,
  responsiveWidth,
} from 'react-native-responsive-dimensions';
import I18n from 'react-native-i18n';
import {
  getPasObject,
  getPubActiveObject,
  readUser,
} from '../../webservice/AuthApi';
import Configuration from '../../webservice/persistences/Configuration';
import '../ads/InterticielAds';
import * as Animatable from 'react-native-animatable';
import DeviceInfo from 'react-native-device-info';
import {bindActionCreators} from 'redux';
import getAuthApiKey from '../../webservice/AuthKeyApi';
import {connect} from 'react-redux';

const theme = require('./../../utils/theme.json');
const route = require('./../../route.json');

class SplashScreen extends Component {
  static navigatorStyle = {
    drawUnderNavBar: true,
    navBarHidden: true,
    drawUnderStatusBar: false,
    statusBarHidden: false,
    statusBarTextColorScheme: 'light',
  };
  static options(passProps) {
    return {
      statusBar: {
        visible: false,
        style: 'light' | 'dark',
        drawBehind: true,
      },
      topBar: {
        title: {
          text: 'My Screen',
        },
        drawBehind: true,
        visible: false,
        animate: false,
      },
    };
  }

  //
  constructor(props) {
    super(props);
    this.state = {};
  }
  workUserResult(result) {
    console.log('SPLASHSCREEN PROPS', this.props);
    if (typeof this.props.navigation.state.params !== 'undefined') {
      if (result === null || result === undefined) {
        this.props.navigation.navigate('Auth');
      } else {
        switch (this.props.navigation.state.params.routeName) {
          case 'historyItemDetails':
            this.props.navigation.navigate(
              this.props.navigation.state.params.routeName,
              {
                item: this.props.navigation.state.params.params,
              },
            );
            break;

          default:
            this.props.navigation.navigate(
              this.props.navigation.state.params.routeName,
              {
                id: this.props.navigation.state.params.params.id,
              },
            );
            break;
        }
      }
    } else {
      var way = '';
      var way2 = '';
      if (result === null || result === undefined) {
        way = 'Auth';
        way2 = route.first;
      } else {
        if (!result.category) {
          way = 'App';
        } else {
          switch (result.category) {
            case 'geolocated':
              way = 'AgentApp';
              break;
            case 'super':
              way = 'adminApp';
              break;
            default:
              way = 'supAdminApp';
          }
        }
        way2 = route.login;
      }
      this.props.navigation.navigate(way);
    }

    /*  Navigation.setStackRoot(route.stackRoot,
                                {        component: {
                                            name: way,
                                        }


                }
            );
           Navigation.showOverlay({
                component: {
                    name: route.intersticielAds,
                    id:"interticiel",
                    options: {
                        overlay: {
                            interceptTouchOutside: false
                        }
                    }
                }
            });*/
  }
  componentDidMount() {
    try {
      this.requestCameraPermission();
    } catch (e) {
      console.log(e);
    }
    this.config = new Configuration();
    this.retrieveAndroidInformation();
    setTimeout(() => this.bounce(), 500);
    this.bounce();
    readUser().then(async user => {
      if (user) {
        if (user !== undefined) {
          if (user.phone !== undefined) {
            this.props.getAuthApiKey(user.phone);
          }
        }
      }
    });
  }
  async requestCameraPermission() {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        {
          title: 'Cool Photo App Camera Permission',
          message:
            'Cool Photo App needs access to your camera ' +
            'so you can take awesome pictures.',
        },
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      } else {
        console.log('try get information else');
      }
    } catch (err) {
      console.log('try get information error');
      console.log(err);
    }
  }
  handleViewRef = ref => (this.view = ref);

  bounce = () => this.view.transition({translateX: 0}, {translateX: 700}, 5000);

  render() {
    return (
      <View style={styles.container}>
        <StatusBar translucent={true} />
        <Image
          style={styles.logo}
          source={require('./../../datas/img/icon3up.png')}
        />
        <View style={{flexDirection: 'row'}}>
          <Image
            style={styles.logo}
            source={require('./../../datas/img/iconsub3.png')}
          />
          <Animatable.View
            style={{
              width: responsiveWidth(90),
              height: 92,
              backgroundColor: theme.primary,
              position: 'absolute',
              zIndex: 100,
            }}
            ref={this.handleViewRef}
          />
        </View>
      </View>
    );
  }

  retreiveIosInformation() {
    readUser()
      .then(result => {
        setTimeout(() => {
          this.workUserResult(result);
        }, 3000);
      })
      .catch(e => {
        this.props.navigation.navigate('Auth');
      });
    return '';
  }

  retrieveAndroidInformation() {
    getPasObject().then(data => {
      console.warn(data);
      this.config.setCurrentPas(data);
    });

    this.config
      ._getData()
      .then(lang => {
        if (lang) {
          I18n.locale = lang;
          readUser().then(result => {
            console.warn(result);
            if (result) {
              getPubActiveObject(result.country_id).then(data => {
                console.warn(data);
                this.config.setPubActive(data);
              });
            }
            setTimeout(() => {
              this.workUserResult(result);
            }, 3000);
          });
        } else {
          const code = DeviceInfo.getDeviceLocale();
          console.warn(code);
          I18n.locale = code.toLowerCase();
          readUser()
            .then(result => {
              console.warn(result);
              if (result) {
                getPubActiveObject(result.country_id).then(data => {
                  console.warn(data);
                  this.config.setPubActive(data);
                });
              }
              setTimeout(() => {
                this.workUserResult(result);
              }, 3000);
            })
            .catch(e => {
              this.setPubActive(data);
            });
        }
      })
      .catch(e => {
        console.warn(e.message);
        DeviceInfo.getDeviceLocale().then(code => {
          console.warn(code);

          I18n.locale = code.toLowerCase();
          readUser()
            .then(result => {
              setTimeout(() => {
                this.workUserResult(result);
              }, 3000);
            })
            .catch(e => {
              this.props.navigation.navigate('Auth');
            });
        });
      });

    return '';
  }
}

const mapStateToProps = state => ({
  loading: state.authKeyReducer.loading,
  authKey: state.authKeyReducer.authKey,
  error: state.authKeyReducer.error,
});

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      getAuthApiKey,
    },
    dispatch,
  );

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.primary,
    justifyContent: 'center',
    alignItems: 'center',
  },
  logoContaner: {
    flexDirection: 'row',
    marginTop: responsiveHeight(20),
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo: {
    width: responsiveWidth(90),
    resizeMode: 'contain',
  },
  lottie: {
    width: 48,
    height: 64,
  },
  title: {
    fontSize: responsiveFontSize(4),
    alignSelf: 'center',
    fontWeight: 'bold',
    color: 'white',
  },
});