import React, { Component } from "react";
import { View, Platform, AsyncStorage } from "react-native";
import BannersComponent from '../../components/banners/BannersComponent';
import QuickViewComponent from '../../components/quick-view/QuickViewComponent';
import ActionScreensListComponent from '../../components/action-screens-list/ActionScreensListComponent';
import { styles } from './LobbyContainer.styles';
import TouchID from 'react-native-touch-id'
import { LobbyActions } from './LobbyActions';
import * as Keychain from 'react-native-keychain';
import Interactable from 'react-native-interactable';
import { QuickView, Lobby } from '../../mocks/mocks';
import { connect } from 'remx';
import { store } from '../../store/store';

class LobbyContainer extends Component {
  static navigatorButtons = {
    rightButtons: [
      {
        id: 'sideMenu',
        component: 'rightButton'
      }
    ]
  };
  constructor(props) {
    super(props);
    this.optionalConfigObject = {
      title: "Authentication Required",
      color: "#e00607"
    }
    this.state = {
      isBiometry: false
    }

    this.checkIfBiometrySupported();
    this._deltaY = 0;
  }


  checkIfBiometrySupported() {
    TouchID.isSupported().then(
      biometryType => {
        this.setState({
          isBiometry: true
        });
      })
      .catch(error => {
        console.log('biometry is not supported. with error: ', error);
      });
  }

  onPressed() {
    AsyncStorage.getItem('longToken')
    .then(
      result => {
        if(result) {
          if(this.state.isBiometry) {
            this.showBiometryModal();
          } else {
            this.showWebView();
          }
        } else {
          this.pushCalConnect()
        }
      })
    .catch(
      error => {
        console.log("Async storage get from on press error: ", error);
        this.pushCalConnect();
      });
  }

  showBiometryModal() {
    TouchID.authenticate('', this.optionalConfigObject)
      .then(success => {
        this.showWebView();
      })
      .catch(error => {
        console.log("error: ", error);
        this.showWebView();
      });
  }

  pushCalConnect() {
    this.props.navigator.push({
      screen: "cal4u.CalConnect",
      title: "התחברות",
      navigatorButtons: {
        rightButtons: [
          {
            id: 'menu',
            component: 'rightButton',
            passProps: {
              navigator: this.props.navigator
            }
          },
        ]
      },
      passProps: {
        isRemember: this.state.isBiometry
      }
    });
  }

  showWebView() {
    this.props.navigator.push({
      screen: "cal4u.WebView",
      title: "עמוד הלוואות",
      navigatorButtons: {
        rightButtons: [
          {
            id: 'menu',
            component: 'rightButton',
            passProps: {
              navigator: this.props.navigator
            }
          },
        ]
      }
    });
  }

  presentNewScreens() {
    this.props.navigator.push({
      screen: "cal4u.ScrollMenu",
      title: "הארנק שלי",
      navigatorButtons: {
        rightButtons: [
          {
            id: 'menu',
            component: 'rightButton',
            passProps: {
              navigator: this.props.navigator
            }
          },
        ]
      }
    });
  }

  render() {
    return (
      <View style={styles.container}>

        <View style={styles.bannersContainer}>
            <BannersComponent
              items={Lobby.banners}
              isAutoplay={true}
            />
          </View>

          <View style={styles.screensListContainer}>
            <ActionScreensListComponent
              onPress={() => this.onPressed()}
              onPressNewFlow={() => this.presentNewScreens()}
            />
          </View>

          <QuickViewComponent
            items={QuickView.cards}
          />

        </View>
    );
  }
}

function mapStateToProps(ownProps) {
  return {
    isLogged: store.getters.getIsLogged()
  };
}

export default connect(mapStateToProps)(LobbyContainer);