import React, { Component } from 'react';
import { Container, TintedView , Text} from '../react/features/base/react';
import { WebView } from 'react-native-webview';



// import { Switch, TouchableWithoutFeedback, View ,Dimensions,KeyboardAvoidingView,Platform,Keyboard,KeyboardEvent } from 'react-native';
// glob.r = {Keyboard,KeyboardEvent,KeyboardAvoidingView,rkav:1}



import { Switch, TouchableWithoutFeedback, View  } from 'react-native';
glob.r = {rkav:0}

class MyWeb0 extends Component {
  render() {
  	// clog("MyWeb")
  	// xlog("cx","MyWeb")
    // return (
    var ret = (
    	<Container style = { glob.sto.wview.cstyle || {  }}>
      <WebView
        source={{ uri: glob.sto.wview.uri || 'https://jinnace.com/' }}
        style={ glob.sto.wview.style || { marginTop: 20 }}/>
    	</Container>
    );
    try {
    	window?.rglob?.fno?.wview?.({ret,that:this})
    } catch (err){
    	clog("webview err:",err)
    }
    return ret 
  }
}

class MyWeb extends Component {
	    constructor(props) {
        super(props);
        glob.sto.wview.mweb = this
        // glob.sto.mweb = this
        glob.elements.mweb = this
    }



    _onMessage(msg,a1,a2,a3) {
    	try {
    		clog("WebView ON MSG")
    		window?.rglob?.fno?.wview_onmsg?.({that:this,args:arguments,msg,a1,a2,a3})
    		// var xr = [height, width,nativeEvent,layout]
    	} catch (err){
    		clog("onMessage ERR:",err)
    	}
    }
    _onLayout({ nativeEvent: { layout: { height, width } } }) {
        // const { onDimensionsChanged } = this.props;
    	try {
    		window?.rglob?.fno?.wview_layout?.({that:this,args:arguments,height, width,V:"_onLayout"})
    		// var xr = [height, width,nativeEvent,layout]
    	} catch (err){
    		clog("TOGGLE Layout ERR:",err)
    	}
        // onDimensionsChanged && onDimensionsChanged(width, height);
    }

    _onLayout2({ nativeEvent: { layout: { height, width } } }) {
        // const { onDimensionsChanged } = this.props;
    	try {
    		window?.rglob?.fno?.wview_layout?.({that:this,args:arguments,height, width,V:"_onLayout2"})
    		// var xr = [height, width,nativeEvent,layout]
    	} catch (err){
    		clog("TOGGLE Layout ERR:",err)
    	}
        // onDimensionsChanged && onDimensionsChanged(width, height);
    }


  render() {
  	// clog("MyWeb")
  	// xlog("cx","MyWeb")
      // originWhitelist={['*']}
    // return (
    var ret = (
      <WebView onLayout = { this._onLayout }
        source={{ uri: glob.sto.wview.uri + (ws7?.rnd_qs || "") || 'https://jinnace.com/' }}
        style={ glob.sto.wview.style || { marginTop: 20 }}
        onMessage= {this._onMessage}
        />
    );
    var r = {kav:1}
    try {
    	window?.rglob?.fno?.wview?.({ret,r,that:this,"V":"WebView"})
    } catch (err){
    	clog("webview err:",err)
    }
    // if (r.kav && 0) {
    if (r.kav && glob.r.rkav) {
                   /*
        // onLayout = { this._onLayout2 }
    return  (
        <KeyboardAvoidingView 
        behavior={Platform.OS == "ios" ? "padding" : "height"}
        style = {{ ...glob.sto.wview.cstyle,top:glob.sto.wview.toolbar.height_adj}} 

        >
        {[ret]}
        </KeyboardAvoidingView>
        )
        //            */
    } else {

    return (
    	<Container style = {{ ...glob.sto.wview.cstyle,top:glob.sto.wview.toolbar.height_adj}} onLayout = { this._onLayout2 }>
    	{[ret]}
    	</Container>
    	)
    }

    // 
  }
}




// class LobbySwitch extends Component<Props> {
class LobbySwitch extends Component {
    /**
     * Initializes a new {@code VideoSwitch} instance.
     *
     * @inheritdoc
     */
    constructor(props) {
        super(props);

        // Bind event handlers so they are only bound once per instance.
        // this._onStartAudioOnlyChange_bnd = this._onStartAudioOnlyChange.bind(this);
        this._onStartAudioOnlyChange = this._onStartAudioOnlyChange.bind(this);
        // this.toggle = 1
        this.toggle = !!(glob.sto.wview.toggle || 0)
        this.toggle_u = 1
        this.time = Date.now()
        this._onStartAudioOnlyFalse = this._onStartAudioOnlyChangeFn(false);
        this._onStartAudioOnlyTrue = this._onStartAudioOnlyChangeFn(true);
        glob.elements.lobby_switch = this
    }

    /**
     * Implements React's {@link Component#render}.
     *
     * @inheritdoc
     */
    render() {
        // const { t, _headerStyles, _settings } = this.props;
        var styles = glob.sto.wview.switch_styles || {}
        if (this.toggle){
        	glob.sto.wview.cstyle = glob.sto.wview.cstyle1
        } else {
        	glob.sto.wview.cstyle = glob.sto.wview.cstyle0

        }
        if (glob.sto.wview.cstyle){

        // glob.sto.wview.cstyle.top = glob.sto.wview.toolbar.height_adj
        }
        var _headerStyles = {}
        var SWITCH_THUMB_COLOR = "#0ff"
        // clog("RND",this.toggle_u == this.toggle,"z",this.toggle_u,this.toggle)
        var SWITCH_UNDER_COLOR = "#0f0"
        this.time = Date.now()
        // this.toggle_u = this.toggle
        this.toggle_u = 0
                    // onValueChange = { this._onStartAudioOnlyChange }
                    // onPress = { this._onStartAudioOnlyFalse }>

        return (
            <View style = { styles.audioVideoSwitchContainer || {} } onLayout = { this._onLayout }>
                <TouchableWithoutFeedback
                    onPress = { this._onStartAudioOnlyFalse }>
                    <View style = { styles.switchLabel || {} }>
                        <Text style = { styles.headerText || {} }>
                            { styles.txt1 || '' }
                        </Text>
                    </View>
                </TouchableWithoutFeedback>
                <Switch
                    onValueChange = { this._onStartAudioOnlyChange }
                    style = { styles.audioVideoSwitch || {}}
                    thumbColor = {  styles.SWITCH_THUMB_COLOR  }
                    trackColor = {  {true:styles.SWITCH_UNDER_COLOR,false: styles.SWITCH_UNDER_COLOR0}  }
                    value = { this.toggle }
                     />
                <TouchableWithoutFeedback
                    onPress = { this._onStartAudioOnlyTrue }>
                    <View style = { styles.switchLabel || {} }>
                        <Text style = { styles.headerText || {} }>
                            { styles.txt2 || '' }
                        </Text>
                    </View>
                </TouchableWithoutFeedback>
            </View>
        );
    }

    _onLayout({ nativeEvent: { layout: { height, width } } }) {
        // const { onDimensionsChanged } = this.props;
    	try {
    		window?.rglob?.fno?.toggle_layout?.({that:this,args:arguments,height, width})
    		// var xr = [height, width,nativeEvent,layout]
    	} catch (err){
    		clog("TOGGLE Layout ERR:",err)
    	}
        // onDimensionsChanged && onDimensionsChanged(width, height);
    }


                    // thumbColor = { styles.SWITCH_THUMB_COLOR || SWITCH_THUMB_COLOR }
                    // trackColor = {{ true: styles.SWITCH_UNDER_COLOR || SWITCH_UNDER_COLOR }}


    _onStartAudioOnlyChange: boolean => void;

    /**
     * Handles the audio-video switch changes.
     *
     * @private
     * @param {boolean} startAudioOnly - The new startAudioOnly value.
     * @returns {void}
     */
    _onStartAudioOnlyChange(startAudioOnly) {

    	try {
    		window?.rglob?.fno?.toggle_?.({that:this,startAudioOnly})
    	} catch (err){
    		clog("TOGGLE ERR:",err)
    	}
    	// this.toggle = !this.toggle
        // const { dispatch } = this.props;

        // dispatch(updateSettings({
            // startAudioOnly
        // }
        // ));
    }

    /**
     * Creates a function that forwards the {@code startAudioOnly} changes to
     * the function that handles it.
     *
     * @private
     * @param {boolean} startAudioOnly - The new {@code startAudioOnly} value.
     * @returns {void}
     */
    _onStartAudioOnlyChangeFn(startAudioOnly) {
    	try {
    		window?.rglob?.fno?.toggle_fn?.({that:this,startAudioOnly})
    	} catch (err){
    		clog("TOGGLE ERR:",err)
    	}
        return () => this._onStartAudioOnlyChange(startAudioOnly);
    }

    _onStartAudioOnlyFalse: () => void;

    _onStartAudioOnlyTrue: () => void;
}


/*
export function _mapStateToProps(state: Object) {
    return {
        _headerStyles: ColorSchemeRegistry.get(state, 'Header'),
        _settings: state['features/base/settings']
    };
}

export  {translate(connect(_mapStateToProps)(LobbySwitch))};


var Psuedo_Thumbnail4 = connect(_mapStateToProps, _mapDispatchToProps)(Psuedo_Thumbnail4_fn);

export {Psuedo_Thumbnail,Psuedo_Thumbnail_fn,
*/



window.MyWeb_ =MyWeb 
window.MyWeb_0 =MyWeb0 
window.LobbySwitch_ =LobbySwitch 
function tlx(argument) {
	// body...
	clog("TLX!!!!!!!!!!!!!!!!!!!!!!!!!!!")
}
setTimeout(tlx,3000)
export {MyWeb,LobbySwitch}