import React from 'react';
import { PokktExtension } from './PokktAds';//Step 1
import {
Platform,
Button,
View,
ScrollView,
Text,
StyleSheet,
TextInput,
Switch,
NativeModules
} from 'react-native';

var pe = window.plugins.pokktExtension; //Step 2

//======================================AdPlayer
export default class AdPlayerScreen extends React.Component {
	static navigationOptions = {
    	title: "AdPlayer View Config"
  	}
	constructor(props) {
    	super(props);
    	this.state = {
			backButtonDisabled: false,
			shouldAllowMute: true,
			shouldCollectFeedback:true,
			isAudioEnabled:true,
			shouldAllowSkip:true,
			shouldSkipConfirm:true,
			defaultSkipTime:"10",
			skipConfirmMessage:"Skipping this ad will earn you NO rewards. Are you sure ?",
			skipConfirmYesLabel:"Yes",
			skipConfirmNoLabel:"No",
			skipTimerMessage:"You can skip this video in ## seconds",
			incentiveMessage:"## seconds for your reward !",
		};
	}
	render() {
    return (
    <ScrollView>
      <View>
	  	<Text style={{paddingTop: 5, textAlign:'center'}}>
		  Back Button Disabled
	  	</Text>
	  	<Switch style={{alignSelf:'center',padding: 5}}
			value={this.state.backButtonDisabled}
			onValueChange={(value) => 
				{
				this.setState({ backButtonDisabled: value })
				}
			}
		/>
	  	<Text style={{paddingTop: 5, textAlign:'center'}}>
		  Show Allow Mute
	  	</Text>
	  	<Switch style={{alignSelf:'center',padding: 5}}
			value={this.state.shouldAllowMute}
			onValueChange={(value) => 
				{
				this.setState({ shouldAllowMute: value })
				}
			}
		/>
	  	<Text style={{paddingTop: 5, textAlign:'center'}}>
		  Should Collect Feedback
	  	</Text>
	  	<Switch style={{alignSelf:'center',padding: 5}}
			value={this.state.shouldCollectFeedback}
			onValueChange={(value) => 
				{
					this.setState({ shouldCollectFeedback: value })
				}
			}
		/>
	  	<Text style={{paddingTop: 5, textAlign:'center'}}>
		  Audio Enabled
	  	</Text>
	  	<Switch style={{alignSelf:'center',padding: 5}}
			value={this.state.isAudioEnabled}
			onValueChange={(value) => 
				{
				this.setState({ isAudioEnabled: value })
				}
			}
		/>
	  	<Text style={{paddingTop: 5, textAlign:'center'}}>
		  Should Allow Skip
	  	</Text>
	  	<Switch style={{alignSelf:'center',padding: 5}}
			value={this.state.shouldAllowSkip}
			onValueChange={(value) => 
				{
				this.setState({ shouldAllowSkip: value })
				}
			}
		/>
	  	<Text style={{paddingTop: 5, textAlign:'center'}}>
		  Should Confirm Skip
	  	</Text>
	  	<Switch style={{alignSelf:'center',padding: 5}}
			value={this.state.shouldSkipConfirm}
			onValueChange={(value) => 
				{
				this.setState({ shouldSkipConfirm: value })
				}
			}
		/>
      	<Text style={{paddingTop: 10, paddingLeft:5, fontSize: 14,fontWeight:'bold'}}>
        	Default Skip Time
	  	</Text>
      	<TextInput style={{height: 30, width:250 ,justifyContent: 'center'}}
    		onChangeText = {(text) => {this.setState({ defaultSkipTime: text })}}
          	placeholder={this.state.defaultSkipTime}
    	/>
      	<Text style={{paddingTop: 10, paddingLeft:5, fontSize: 14,fontWeight:'bold'}}>
        	Skip Confirm Message
	  	</Text>
      	<TextInput style={{height: 50, width:250 ,justifyContent: 'center'}}
    		onChangeText = {(text) => {this.setState({ defaultSkipTime: text })}}
          	placeholder={this.state.skipConfirmMessage}
    	/>
      	<Text style={{paddingTop: 10, paddingLeft:5, fontSize: 14,fontWeight:'bold'}}>
        	Skip Confirm Yes Label
	  	</Text>
      	<TextInput style={{height: 50, width:250 ,justifyContent: 'center'}}
    		onChangeText = {(text) => {this.setState({ skipConfirmYesLabel: text })}}
          	placeholder={this.state.skipConfirmYesLabel}
    	/>
      	<Text style={{paddingTop: 10, paddingLeft:5, fontSize: 14,fontWeight:'bold'}}>
        	Skip Confirm No Label
	  	</Text>
      	<TextInput style={{height: 50, width:250 ,justifyContent: 'center'}}
    		onChangeText = {(text) => {this.setState({ skipConfirmNoLabel: text })}}
          	placeholder={this.state.skipConfirmNoLabel}
    	/>
      	<Text style={{paddingTop: 10, paddingLeft:5, fontSize: 14,fontWeight:'bold'}}>
        	Skip Timer Message
	  	</Text>
      	<TextInput style={{height: 50, width:250 ,justifyContent: 'center'}}
    		onChangeText = {(text) => {this.setState({ skipTimerMessage: text })}}
          	placeholder={this.state.skipTimerMessage}
    	/>
      	<Text style={{paddingTop: 10, paddingLeft:5, fontSize: 14,fontWeight:'bold'}}>
        	Incentive Message
	  	</Text>
      	<TextInput style={{height: 50, width:250 ,justifyContent: 'center'}}
    		onChangeText = {(text) => {this.setState({ incentiveMessage: text })}}
          	placeholder={this.state.incentiveMessage}
    	/>
      	<View style={styles.buttonContainer}>
        	<Button
				title="Set AdPlayer View Config"
				onPress= {() => {pe.setAdViewConfig(JSON.stringify(this.state))}}
        	/>
        </View>
      </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  buttonContainer: {
    width : 250,
    borderRadius: 10,
    padding: 5,
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 3
    },
    shadowRadius: 10,
	shadowOpacity: 0.25,
	justifyContent:'center',
	alignSelf:'center'
  },
});