import * as React from 'react';
import { Alert, BackHandler, SafeAreaView } from 'react-native';
import { connect } from "react-redux";
import { WebView } from 'react-native-webview';
import { Container } from 'native-base';
import Elements from '../../components/elements'
import Theme from '../../components/theme.style.js';
import CustomSafeArea from '../../components/safeArea.component';

class VerificationWebview extends React.Component {

  constructor(props) {
    super(props);
  }

  state = {
    loading: false,
    onBack: false,
    verificationUrl: this.props.route.params?.verificationUrl,
    referenceNumber: this.props.route.params?.referenceNumber
  }

  componentDidMount() {
    console.log('on component mount')
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress)
  }

  componentWillUnmount() {
    console.log('on component dismount')
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress)
  }

  onBackPress = () => {
    console.log('on back pressed')
    return true
  }

  onStateChange = (webViewState) => {
    let url = webViewState.url;

    if(url.includes('https://unioil.com/success') && !webViewState.loading) {
      if(this.state.onBack) return;

      this.setState({ onBack: true });
      this.props.route.params?.onSuccessAuthentication(this.state.referenceNumber, () => {
        this.setState({ loading: false });
      })
      return this.props.navigation.pop(2)
    }

    if(url.includes('https://unioil.com/failure') && !webViewState.loading) {
      if(this.state.onBack) return;

      this.setState({ onBack: true });
      Alert.alert("Information", '\n' + "Error in adding card.");
      return this.props.navigation.goBack();
    }
  }

  render() {
    return (
      <CustomSafeArea>
        <Elements.loaderView 
          title="Validating"
          message="Please wait..."
          isDarkMode={this.props.app_theme?.theme.dark}
          backgroundColor={this.props.app_theme?.theme.colors.border}
          color={this.props.app_theme?.theme.colors.text}
          visible={this.state.loading} />
          <WebView
            originWhitelist={['*']}
            source={{ uri: this.state.verificationUrl }}
            style={{
              backgroundColor: 'transparent',
              width: Theme.screen.w,
              height: Theme.screen.h,
              padding: 15
            }}
            onNavigationStateChange={(webViewState) => this.onStateChange(webViewState)}
          />
        </CustomSafeArea>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    userinfo: state.appUserInfoReducer.userinfo,
    app_theme: state.appThemeReducer.theme
  }
}

export default connect(mapStateToProps, null)(VerificationWebview)