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

import { createStackNavigator } from 'react-navigation'; // Version can be specified in package.json
import { DeviceEventEmitter,NativeEventEmitter } from 'react-native';

var pe = window.plugins.pokktExtension; //Step 2
var emitter;//Step 3 -- needed for ios
class HomeScreen extends React.Component {
	static navigationOptions = {
    	title: "POKKT"
  	}
	constructor(props) {
    	super(props);
    	this.state = {
      		appId: 'f303768353fb89d188f24b36c4d80b2e',
      		secKey: 'f3b2bec2234694467398589e1606234b',
      		version: '0.0'
		};
		//set version number
  		pe.getSDKVersion((ver) => {
  			console.log('Version : ',ver);
  			this.setState({version: ver})
  		})
  		//set debug
        pe.setDebug("true");
	}

	render() {
	return (
	<ScrollView>
	<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
		<Text style={{padding: 5, fontSize: 14}}>
    		{this.state.version}
    	</Text>
    	<Text style={{padding: 5, fontSize: 14}}>
    		Application Id
    	</Text>
    	<TextInput
        	style={{padding: 5,fontSize: 14, height: 30, width:250}}
        	onChangeText = {(text) => {this.setState({ appId: text })}}
        	placeholder= 'f303768353fb89d188f24b36c4d80b2e'
    	/>

    	<Text style={{padding: 5, fontSize: 14}}>
        	Security Key
    	</Text>
    	<TextInput style={{padding: 5,fontSize: 14, height: 30, width:250}}
    		onChangeText = {(text) => {this.setState({ secKey: text })}}
          	placeholder="f3b2bec2234694467398589e1606234b"
    	/>

    	<View style={styles.buttonContainer}>
    		<Button
          		title="Set Pokkt Config"
          		onPress= {() => {
          		pe.setPokktConfig(this.state.appId,this.state.secKey );
          		pe.setDataAccessConsent(false,true );
          		pe.setThirdPartyUserId("12345");
          		var adPlayerViewConfig = pe.createAdViewConfig();
				// set properties values to adPlayerViewConfig 
				pe.setAdViewConfig(JSON.stringify(adPlayerViewConfig));

          		this.props.navigation.navigate('Ads')}
          		}
        	/>
    	</View>
    </View>
    </ScrollView>
    );
  }
}

//=============================================================================Ads Screen
class AdsScreen extends React.Component {
	static navigationOptions = {
    	title: "Ad Type"
  	}
	render() {
    return (
    <ScrollView>
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    	<View style={styles.buttonContainer}>
    		<Button
          		title="Video Ads"
          		onPress={() => this.props.navigation.navigate('Video')}
          	/>
    	</View>
    	<View style={{height: 10, backgroundColor: 'powderblue'}} />
    	<View style={styles.buttonContainer}>
        	<Button
         		title="Interstitial"
          		onPress={() => this.props.navigation.navigate('Interstitial')}
        	/>
    	</View>
    	<View style={{height: 10, backgroundColor: 'powderblue'}} />
    	<View style={styles.buttonContainer}>
        	<Button
         		title="Banner"
          		onPress={() => this.props.navigation.navigate('Banner')}
        	/>
    	</View>
    </View>
    </ScrollView>
    );
  }
}
//========================================================================Video Ads Screen
class VideoScreen extends React.Component {
	static navigationOptions = {
    	title: "Video",
  	}
	constructor(props) {
    	super(props);
    	this.state = {
      		screenName: 'Default',
      		message : ''
		};
		this.adCachingCompletedCallback = this.adCachingCompletedCallback.bind(this);
		this.adCachingFailedCallback = this.adCachingFailedCallback.bind(this);
		this.adDisplayedCallback = this.adDisplayedCallback.bind(this);
		this.adSkippedCallback = this.adSkippedCallback.bind(this);
		this.adCompletedCallback = this.adCompletedCallback.bind(this);
		this.adClosedCallback = this.adClosedCallback.bind(this);
		this.adGratifiedCallback = this.adGratifiedCallback.bind(this);
		this.adFailedCallback = this.adFailedCallback.bind(this);
	}
	//Constructor end
	adCachingCompletedCallback(param) {
	    	this.setState({message:'VideoAdCachingCompleted'});
  			console.log('VideoAdCachingCompleted '+param);
  	}
  	adCachingFailedCallback(param) {
	    	this.setState({message:'VideoAdCachingFailed'});
  			console.log('VideoAdCachingFailed '+param);
  	}
  	adDisplayedCallback(param) {
	    	this.setState({message:'VideoAdDisplayed'});
  			console.log('VideoAdDisplayed '+param);
  	}
  	adSkippedCallback(param) {
	    	this.setState({message:'VideoAdSkipped'});
  			console.log('VideoAdSkipped '+param);
  	}
  	adCompletedCallback(param) {
	    	this.setState({message:'VideoAdCompleted'});
  			console.log('VideoAdCompleted '+param);
  	}
  	adClosedCallback(param) {
	    	this.setState({message:'VideoAdClosed'});
  			console.log('VideoAdClosed '+param);
  	}
  	adGratifiedCallback(param) {
	    	this.setState({message:'VideoAdGratified'});
	    	var data = JSON.parse(param);
	    	pe.showToast("Points earned : " + data.REWARD);
  			console.log('VideoAdGratified '+param);
  	}
  	adFailedCallback(param) {
	    	this.setState({message:'VideoAdFailedToShow'});
  			console.log('VideoAdFailedToShow '+param);
  	}
  	
	componentWillMount() {
		/*DeviceEventEmitter.addListener('VideoAdCachingFailed', (param) => {
	    	this.setState({message:'VideoAdCachingFailed'});
  			console.log('VideoAdCachingFailed '+param);
  		});*/
  		const { PokktPluginEvent } = NativeModules;
  		emitter = Platform.select({ios: new NativeEventEmitter(PokktPluginEvent),
 					android: DeviceEventEmitter});
	    emitter.addListener('VideoAdCachingCompleted', this.adCachingCompletedCallback);
  		emitter.addListener('VideoAdCachingFailed', this.adCachingFailedCallback);
  		emitter.addListener('VideoAdDisplayed', this.adDisplayedCallback);
  		emitter.addListener('VideoAdSkipped', this.adSkippedCallback);
  		emitter.addListener('VideoAdCompleted', this.adCompletedCallback);
  		emitter.addListener('VideoAdClosed', this.adClosedCallback);
  		emitter.addListener('VideoAdGratified', this.adGratifiedCallback);
  		emitter.addListener('VideoAdFailedToShow', this.adFailedCallback);
	}
	componentWillUnmount() {
		console.log("unmount");
	    emitter.removeListener('VideoAdCachingCompleted', this.adCachingCompletedCallback);
  		emitter.removeListener('VideoAdCachingFailed', this.adCachingFailedCallback);
  		emitter.removeListener('VideoAdDisplayed', this.adDisplayedCallback);
  		emitter.removeListener('VideoAdSkipped', this.adSkippedCallback);
  		emitter.removeListener('VideoAdCompleted', this.adCompletedCallback);
  		emitter.removeListener('VideoAdClosed', this.adClosedCallback);
  		emitter.removeListener('VideoAdGratified', this.adGratifiedCallback);
  		emitter.removeListener('VideoAdFailedToShow', this.adFailedCallback);
	}

	render() {
    return (
    <ScrollView>
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      	<Text style={{padding: 10, fontSize: 14}}>
        	{this.state.message}
	  	</Text>
      	<Text style={{padding: 10, fontSize: 14}}>
        	Screen Name
	  	</Text>
      	<TextInput style={{height: 40, width:250 ,justifyContent: 'center'}}
    		onChangeText = {(text) => {this.setState({ screenName: text })}}
          	placeholder="Default"
    	/>
      	<View style={styles.buttonContainer}>
        	<Button
          		title="Cache Rewarded Video"
          		onPress= {() => {pe.cacheRewardedVideoAd(this.state.screenName);}}
        	/>
        </View>
        <View style={{height: 10, backgroundColor: 'powderblue'}} />
        <View style={styles.buttonContainer}>
        	<Button
          		title="Show Rewarded Video"
          		onPress= {() => {
          					pe.isVideoAdCached(this.state.screenName, true, (result) => {
          						Platform.select({ios: console.log("Rewarded Video Ad is Cached : " + result),
 												android: pe.showToast("Rewarded Video Ad is Cached : " + result)});
          					});
        					pe.showRewardedVideoAd(this.state.screenName);
          				  }
          			}
        	/>
        </View>
        <View style={{height: 10, backgroundColor: 'powderblue'}} />
        <View style={styles.buttonContainer}>
        	<Button
          		title="Cache Non Rewarded Video"
          		onPress= {() => {pe.cacheNonRewardedVideoAd(this.state.screenName);}}
        	/>
        </View>
        <View style={{height: 10, backgroundColor: 'powderblue'}} />
        <View style={styles.buttonContainer}>
        	<Button
          		title="Show Non Rewarded Video"
          		onPress= {() => {
          					pe.isVideoAdCached(this.state.screenName, false, (result) => {
          						Platform.select({ios: console.log("Non Rewarded Video Ad is Cached : " + result),
 												android: pe.showToast("Non Rewarded Video Ad is Cached : " + result)});
          					});
        					pe.showNonRewardedVideoAd(this.state.screenName);
          				}
          			}
        	/>
        </View>
      </View>
      </ScrollView>
    );
  }
}
//============================================================================Interstitial
class InterstitialScreen extends React.Component {
	static navigationOptions = {
    	title: "Interstitial"
  	}
	constructor(props) {
    	super(props);
    		this.state = {
      		screenName: 'Default',
      		message : ''
		};

		this.adCachingCompletedCallback = this.adCachingCompletedCallback.bind(this);
		this.adCachingFailedCallback = this.adCachingFailedCallback.bind(this);
		this.adDisplayedCallback = this.adDisplayedCallback.bind(this);
		this.adSkippedCallback = this.adSkippedCallback.bind(this);
		this.adCompletedCallback = this.adCompletedCallback.bind(this);
		this.adClosedCallback = this.adClosedCallback.bind(this);
		this.adGratifiedCallback = this.adGratifiedCallback.bind(this);
		this.adFailedCallback = this.adFailedCallback.bind(this);
	}
	//Constructor end
	adCachingCompletedCallback(param) {
	    	this.setState({message:'InterstitialCachingCompleted'});
  			console.log('InterstitialCachingCompleted '+param);
  	}
  	adCachingFailedCallback(param) {
	    	this.setState({message:'InterstitialCachingFailed'});
  			console.log('InterstitialCachingFailed '+param);
  	}
  	adDisplayedCallback(param) {
	    	this.setState({message:'InterstitialDisplayed'});
  			console.log('InterstitialDisplayed '+param);
  	}
  	adSkippedCallback(param) {
	    	this.setState({message:'InterstitialSkipped'});
  			console.log('InterstitialSkipped '+param);
  	}
  	adCompletedCallback(param) {
	    	this.setState({message:'InterstitialCompleted'});
  			console.log('InterstitialCompleted '+param);
  	}
  	adClosedCallback(param) {
	    	this.setState({message:'InterstitialClosed'});
  			console.log('InterstitialClosed '+param);
  	}
  	adGratifiedCallback(param) {
	    	this.setState({message:'InterstitialGratified'});
	    	var data = JSON.parse(param);
	    	pe.showToast("Points earned : " + data.REWARD);
  			console.log('InterstitialGratified '+param);
  	}
  	adFailedCallback(param) {
	    	this.setState({message:'InterstitialFailedToShow'});
  			console.log('InterstitialFailedToShow '+param);
  	}
  	
  	componentWillMount() {
		const { PokktPluginEvent } = NativeModules;
  		emitter = Platform.select({ios: new NativeEventEmitter(PokktPluginEvent),
 					android: DeviceEventEmitter});
  		if (emitter !== undefined) {
		    emitter.addListener('InterstitialCachingCompleted', this.adCachingCompletedCallback);
  			emitter.addListener('InterstitialCachingFailed', this.adCachingFailedCallback);
  			emitter.addListener('InterstitialDisplayed', this.adDisplayedCallback);
	  		emitter.addListener('InterstitialSkipped', this.adSkippedCallback);
  			emitter.addListener('InterstitialCompleted', this.adCompletedCallback);
  			emitter.addListener('InterstitialClosed', this.adClosedCallback);
	  		emitter.addListener('InterstitialGratified', this.adGratifiedCallback);
  			emitter.addListener('InterstitialFailedToShow', this.adFailedCallback);
  		}
	}
	componentWillUnmount() {
		console.log("unmount");
	    emitter.removeListener('InterstitialCachingCompleted', this.adCachingCompletedCallback);
  		emitter.removeListener('InterstitialCachingFailed', this.adCachingFailedCallback);
  		emitter.removeListener('InterstitialDisplayed', this.adDisplayedCallback);
  		emitter.removeListener('InterstitialSkipped', this.adSkippedCallback);
  		emitter.removeListener('InterstitialCompleted', this.adCompletedCallback);
  		emitter.removeListener('InterstitialClosed', this.adClosedCallback);
  		emitter.removeListener('InterstitialGratified', this.adGratifiedCallback);
  		emitter.removeListener('InterstitialFailedToShow', this.adFailedCallback);
	}
	render() {
    return (
    <ScrollView>
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      	<Text style={{padding: 10, fontSize: 14}}>
        	{this.state.message}
	  	</Text>
      	<Text style={{padding: 10, fontSize: 14}}>
        	Screen Name
	  	</Text>
      	<TextInput style={{fontSize: 14, height: 40, width:250 ,justifyContent: 'center'}}
    		onChangeText = {(text) => {this.setState({ screenName: text })}}
          	placeholder="Default"
    	/>
      	<View style={styles.buttonContainer}>
        	<Button
          		title="Cache Rewarded Interstitial"
          		onPress= {() => {pe.cacheRewardedInterstitial(this.state.screenName);}}
        	/>
        </View>
        <View style={{height: 10, backgroundColor: 'powderblue'}} />
        <View style={styles.buttonContainer}>
        	<Button
          		title="Show Rewarded Interstitial"
          		onPress= {() => {
          					pe.isInterstitialAdCached(this.state.screenName, true, (result) => {
          						Platform.select({ios: console.log("Rewarded Interstitial is Cached : " + result),
 												android: pe.showToast("Rewarded Interstitial is Cached : " + result)});
          					});
        					pe.showRewardedInterstitial(this.state.screenName);
          				  }
          			}
        	/>
        </View>
        <View style={{height: 10, backgroundColor: 'powderblue'}} />
        <View style={styles.buttonContainer}>
        	<Button
          		title="Cache Non Rewarded Interstitial"
          		onPress= {() => {pe.cacheNonRewardedInterstitial(this.state.screenName);}}
        	/>
        </View>
        <View style={{height: 10, backgroundColor: 'powderblue'}} />
        <View style={styles.buttonContainer}>
        	<Button
          		title="Show Non Rewarded Interstitial"
          		onPress= {() => {
          					pe.isInterstitialAdCached(this.state.screenName, false, (result) => {
          						Platform.select({ios: console.log("Non Rewarded Interstitial is Cached : " + result),
 												android: pe.showToast("Non Rewarded Interstitial is Cached : " + result)});
          					});
        					pe.showNonRewardedInterstitial(this.state.screenName);
          				  }
          			}
        	/>
        </View>
      </View>
      </ScrollView>
    );
  }
}

class BannerScreen extends React.Component {
	static navigationOptions = {
    	title: "Banner"
  	}
	constructor(props) {
    	super(props);
    	this.state = {
      		screenName: 'Default',
      		message : ''
		};
		this.bannerLoadedCallback = this.bannerLoadedCallback.bind(this);
		this.bannerLoadFailedCallback = this.bannerLoadFailedCallback.bind(this);
	}
	bannerLoadedCallback(param) {
	    	this.setState({message:'BannerLoaded'});
  			console.log('BannerLoaded '+param);
  	}
  	bannerLoadFailedCallback(param) {
	    	this.setState({message:'BannerLoadFailed'});
  			console.log('BannerLoadFailed '+param);
  	}
	componentWillMount() {
		const { PokktPluginEvent } = NativeModules;
  		emitter = Platform.select({ios: new NativeEventEmitter(PokktPluginEvent),
 					android: DeviceEventEmitter});
	    emitter.addListener('BannerLoaded', this.bannerLoadedCallback);
  		emitter.addListener('BannerLoadFailed', this.bannerLoadFailedCallback);
	}
	componentWillUnmount() {
		console.log("unmount");
	    emitter.removeListener('BannerLoaded', this.bannerLoadedCallback);
  		emitter.removeListener('BannerLoadFailed', this.bannerLoadFailedCallback);
  		pe.destroyBanner(this.state.screenName);
	}
	render() {
    return (
    <ScrollView>
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      	<Text style={{padding: 10, fontSize: 14}}>
        	{this.state.message}
	  	</Text>
      	<Text style={{padding: 10, fontSize: 14}}>
        	Screen Name
	  	</Text>
      	<TextInput style={{height: 40, width:250 ,justifyContent: 'center'}}
    		onChangeText = {(text) => {this.setState({ screenName: text })}}
          	placeholder="Default"
    	/>
      	<View style={styles.buttonContainer}>
        	<Button
          		title="Show Banner"
          		onPress= {() => {pe.loadBanner(this.state.screenName,8);}}
        	/>
        </View>
        <View style={{height: 10, backgroundColor: 'powderblue'}} />
        <View style={styles.buttonContainer}>
        	<Button
          		title="Destroy Banner"//handle back button. destroy banner and remove listener also
          		onPress= {() => {pe.destroyBanner(this.state.screenName);}}
        	/>
        </View>
      </View>
      </ScrollView>
    );
  }
}

const RootStack = createStackNavigator(
  {
    Home: {
    	screen:HomeScreen,
    	navigationOptions: {
            header: false,
        }
        },
    Ads: {
    	screen:AdsScreen,
    	navigationOptions: {
            header: false,
        }
        },
    Video: {screen:VideoScreen},
    Interstitial: {screen:InterstitialScreen},
    Banner: {screen:BannerScreen},
  },
  {
    initialRouteName: 'Home',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

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