import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  WebView,
  Alert,
  ActivityIndicator,
} from 'react-native';
import { Actions } from 'react-native-router-flux';
import Messages from '../UI/Messages';
import Header from '../UI/Header';
import Spacer from '../UI/Spacer';
import Offline from '../User/OfflineNotice';

// const url = 'https://gwadev.xtendly.com/'
const url = 'https://globalcareercreation.com/myaccount/'
class LoginWeb extends React.Component {

  constructor(props) {
    super(props)

    this.state = {
      isLoaded: false,
    }
  }


  render() {
    // var renderTime = Date.now();
    const INJECTEDJAVASCRIPT = `const meta = document.createElement('meta'); meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `
    return (
      // <View pointerEvents="none">
      <WebView
        useWebKit={true}
        source={{ uri: url }}
        style={{ flex: 1, alignItems: 'center' }}
        style={{ marginTop: 20 }}
        injectedJavaScript={INJECTEDJAVASCRIPT}
        scrollEnabled
      // // scalesPageToFit={false}
      // onLoad={() => {
      //   Alert.alert('On load event', `Loading time : ${Date.now() - renderTime}`)
      // }}
      />
      //  </View>
    );
  }
}

export default class Login extends Component<{}> {
  constructor(props) {
    super(props)

    this.state = {
      isLoaded: false,
    }
  }

  render() {

    if (this.state.isLoaded) {
      return (
          <LoginWeb />

      )
    }

    return (
      <View style={styles.container}>
        <View style={{ height: 0, width: 0 }}>
          <WebView
            source={{ uri: url }}
            onLoad={() => {
              this.setState({ isLoaded: true })
            }}
          />
        </View>
        <ActivityIndicator />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});