/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */

import {
  setTestDeviceIDAsync,
  AdMobBanner,
  AdMobInterstitial,
  PublisherBanner,
  AdMobRewarded,
} from 'expo-ads-admob';
import * as Font from 'expo-font';
import React, { Component } from 'react';
import { SafeAreaView, ScrollView } from 'react-native';
import { Button, Text, StyleSheet } from 'react-native';
import { Container } from 'native-base';
import HeaderCommon from '../../components/common/header';
import { NavigationDrawerScreenProps } from 'react-navigation-drawer';
interface Iprops extends NavigationDrawerScreenProps {}
setTestDeviceIDAsync('EMULATOR');
AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712');
AdMobRewarded.setAdUnitID('ca-app-pub-3940256099942544/8691691433');
// AdMobRewarded.setTestDeviceID('EMULATOR');

class AdMobExample extends Component<Iprops> {
  state = {
    disableInterstitialBtn: false,
    disableRewardedBtn: false,
    fontLoaded: false,
  };

  _openInterstitial = async () => {
    try {
      this.setState({ disableInterstitialBtn: true });
      await AdMobInterstitial.requestAdAsync();
      await AdMobInterstitial.showAdAsync();
    } catch (error) {
      console.error(error);
    } finally {
      this.setState({ disableInterstitialBtn: false });
    }
  };
  async componentDidMount() {
    await Font.loadAsync({
      montserrat: require('../../assets/Fonts/Montserrat.ttf'),
    });
    this.setState({ fontLoaded: true });
  }

  _openRewarded = async () => {
    try {
      this.setState({ disableRewardedBtn: true });
      await AdMobRewarded.requestAdAsync();
      await AdMobRewarded.showAdAsync();
    } catch (error) {
      console.error(error);
    } finally {
      this.setState({ disableRewardedBtn: false });
    }
  };
  toggleMenu = () => this.props.navigation.toggleDrawer();
  render() {
    const {
      disableInterstitialBtn,
      disableRewardedBtn,
      fontLoaded,
    } = this.state;
    if (!fontLoaded) {
      return <Container></Container>;
    }
    return (
      <Container>
        <HeaderCommon title="AdMob Demo" toggleMenu={this.toggleMenu} />
        <ScrollView>
          <SafeAreaView style={{ margin: 20 }}>
            <Text style={styles.exampleText}>
              Set Ad Unit Id, Interstitial Id & Rewarded Id only on the top
              level component once.
            </Text>
            <Text style={styles.exampleText}>Banner Ad</Text>
            <AdMobBanner
              bannerSize="mediumRectangle"
              adUnitID={'ca-app-pub-3940256099942544/6300978111'}
            />
            <Text style={styles.exampleText}>Publisher Banner</Text>
            <PublisherBanner
              bannerSize="banner"
              adUnitID={'ca-app-pub-3940256099942544/6300978111'}
            />
            <Text style={styles.exampleText}>Interstitial Ad</Text>
            <Button
              title="Open"
              disabled={disableInterstitialBtn}
              onPress={this._openInterstitial}
            />
            <Text style={styles.exampleText}>Rewarded Ad</Text>
            <Button
              title="Open"
              disabled={disableRewardedBtn}
              onPress={this._openRewarded}
            />
          </SafeAreaView>
        </ScrollView>
      </Container>
    );
  }
}

export default AdMobExample;

const styles = StyleSheet.create({
  exampleText: {
    fontSize: 15,
    color: '#ccc',
    marginVertical: 10,
    fontFamily: 'montserrat',
  },
});
