import React, { Component } from 'react';
import { View, ScrollView, TouchableOpacity, Linking } from 'react-native';
import Text from '../../components/Text';
import { Badge } from 'native-base'
import { WebView } from 'react-native-webview';
import { t } from '../../utils/i18n'
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import {appCleanUser} from "../../redux/app/action";
import I18n from "i18n-js";

class TermsAndCondition extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentLocale: 'th'
    };
  }

  componentDidMount(): void {
    this.setState({
      currentLocale : I18n.currentLocale()
    })
  }

  render() {
    return (
      <ScrollView contentContainerStyle={{flex:1}}>
        <View style={{flex:1}}>
          <View style={{flex:1,padding:16}}>
            {/* <Text> TermsAndCondition </Text> */}
            <WebView
            style={{
              margin:12,
              marginTop:0,
              backgroundColor: 'rgba(0,0,0,0)' ,
              flex: 1,
            }}
            originWhitelist={['*']}
            source={ this.state.currentLocale === 'th' ? { uri: 'https://app.csasset.co.th/privacy-policy'} : {uri: 'https://app.csasset.co.th/privacy-policy-en'}}
            javaScriptEnabled={true}
            domStorageEnabled={true}
            onNavigationStateChange={(event) => {
              console.log('onNavigationStateChange >>>>>> ',event);
              /*if (event.url.startsWith("http")) {
                this.webview.stopLoading();
                this.webview.goBack();
                Linking.openURL(event.url);
              }*/
            }}
          />
          </View>
          <View style={{flexDirection:'row',justifyContent:'space-around',height:60}}>
          <TouchableOpacity onPress={() => {
             this.props. appCleanUser();
              this.props.navigation.goBack()
              }}>
              <View>
                <Badge style={{ backgroundColor: '#FFFFFF', borderRadius: 5, borderColor: 'black', borderWidth:1, marginTop: 10, height: null, width: 150 }}>
                  <Text style={{ fontSize: 16, color: 'black', padding: 5, textAlign:'center' }}>{t('not_agree')}</Text>
                </Badge>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => {
              this.props.navigation.navigate('Register')
              }}>
              <View>
                <Badge style={{ backgroundColor: '#145EB3', borderRadius: 5, marginTop: 10, height: null, width: 150 }}>
                  <Text style={{ fontSize: 16, color: 'white', padding: 5, textAlign:'center' }}>{t('agree')}</Text>
                </Badge>
              </View>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    );
  }
}

const clearUser = dispatch => bindActionCreators({appCleanUser}, dispatch);
export default connect(null, clearUser)(TermsAndCondition);