/**
 * Sample React Native App
 *
 * adapted from App.js generated by the following command:
 *
 * react-native init example
 *
 * https://github.com/facebook/react-native
 */

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Button, ScrollView } from 'react-native';
import KlarnaPaymentView from 'react-native-klarna-inapp-sdk';



export default class App extends Component {

  actionButtons = (paymentMethod) => {
    return (
      <View style={styles.buttonsContainer}>
        <Button
          onPress={() => {
            this.refs[paymentMethod].initialize(authToken, 'returnUrl://')
          }}
          title="Init."
          style={styles.button} />
        <Button
          onPress={() => {
            this.refs[paymentMethod].load()
          }}
          title="Load"
          style={styles.button} />
        <Button
          onPress={() => {
            this.refs[paymentMethod].authorize()
          }}
          title="Authorize"
          style={styles.button} />
        <Button
          onPress={() => {
            this.refs[paymentMethod].reauthorize()
          }}
          title="Reauthorize"
          style={styles.button} />
        <Button
          onPress={() => {
            this.refs[paymentMethod].finalize()
          }}
          title="Finalize"
          style={styles.button} />
      </View>
    )
  }

  onEvent = (event) => {
    window.console.warn(JSON.stringify(event.nativeEvent))
  }

  render = () => {
    return (
      <View style={styles.outer}>
      <ScrollView vertical style={styles.scrollView} contentContainerStyle={styles.scrollViewContentContainer}>
        <Text style={styles.header}>☆Klarna Payments Test App</Text>
        {paymentMethods.map(paymentMethod => {
          return (
            <View style={styles.container} key={paymentMethod}>
              <Text style={styles.title}>{paymentMethod}</Text>
              <KlarnaPaymentView
                category={paymentMethod}
                ref={paymentMethod}
                style={styles.paymentView}
                onInitialized={this.onEvent}
                onLoaded={this.onEvent}
                onAuthorized={this.onEvent}
                onError={this.onEvent} />
              {this.actionButtons(paymentMethod)}
            </View>
          )
        })}
      </ScrollView>
      </View>
    );
  }
}

const authToken = '<your token here>'

const paymentMethods = ['pay_now', 'pay_later', 'slice_it'];

const styles = StyleSheet.create({
  outer: {
    flex: 1,
    flexGrow: 1
  },
  scrollView: {
    flex: 1,
    flexGrow: 1
    },
  scrollViewContentContainer: {
    justifyContent: 'space-between'
  },

  container: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    width: "100%"
  },
  header: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  paymentView: {
    width: "100%",
    flexGrow: 1
  },
  title: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  buttonsContainer: {
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    margin: 10
  },
  button: {
    height: 10
  },
});
