import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
import base64 from 'react-native-base64';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
       nnJsonData: ''
    }
  }
  componentDidMount() {
    // Need to enter your payment access key value here
    const payment_access_key  = '###YOUR_PAYMENT_ACCESS_KEY###';

    // Now, have to encode the $payment_access_key value with the base64 encode
    const encoded_data 		 = base64.encode(payment_access_key);

    // Action Endpoint
    const endpoint            = 'https://payport.novalnet.de/v2/seamless/payment';

    // Build the Headers
    const headers = {
      // The Content-Type should be "application/json"
      "Content-Type": "application/json",

      // The charset should be "utf-8"
      "Charset":"utf8",

      // Optional
      "Accept":"application/json",

      // The formed authenticate value (case-sensitive)
      "X-NN-Access-Key": encoded_data
    };

    const data = {};

    // Build Merchant Data
    data.merchant = {
      // Your API signature value
      "signature": "###YOUR_API_SIGNATURE###",
 
      // Your corresponding tariff ID
      "tariff": "###YOUR_TARIFF_ID###"
    };

    // Build Customer Data
    data.customer = {
      // Shopper's first name
      "first_name": "Max",

      // Shopper's last name
      "last_name": "Mustermann",

      // Shopper's email
      "email": "test@novalnet.de",

      // Shopper's customer number from the shop
      "customer_no": "###CUSTOMER_NUMBER###",

      // Shopper's Telephone number
      "tel": "+49 089 123456",

      // Shopper's Mobile number
      "mobile": "+49 174 7781423",

      // Shopper's IP address - Decomment it based on your usage
      // "customer_ip": "###CUSTOMER_IP###",

      // Shopper's birthdate value YYYY-MM-DD - Decomment it based on your usage
      // "birth_date": "1992-06-10",

      // Shopper's gender - Decomment it based on your usage
      // "gender": "u",

      // Shopper's company vat ID value - Decomment it based on your usage
      // "vat_id": "DE123456",

      // Shopper's company regestration number - Decomment it based on your usage
      // "reg_no": "HRB1234",

      // Shopper's company tax ID value - Decomment it based on your usage
      // "tax_id": "123/123/123",

      // Shopper's session value - Decomment it based on your usage
      // "session": "fedgrgst5653653hdgfsvgdsf622627e",

      // Shopper's fax number - Decomment it based on your usage
      // "fax": "+49 89 654321",

      // Shopper's billing address
      "billing": {
        // House number
        "house_no": "2",

        // Street
        "street": "Musterstr",

        // City
        "city": "Musterhausen",

        // zip
        "zip": "12345",

        // Country's ISO code
        "country_code": "DE",

        // Name of the company - Decomment it based on your usage
        // "company": "ABC GmbH"
      }
    };

    // Build Transaction Data
    data.transaction = {
      // The Payment type of the transaction
      "payment_type": "###PAYMENT_TYPE###",

      // The transaction amount in smaller currency unit
      // For the predefined tariff, amount is not required to be passed explicitly
      "amount": "###TRANSACTION_AMOUNT###",

      // The transaction currency's ISO code
      // For the predefined tariff, currency is not required to be passed explicitly
      "currency": "###TRANSACTION_CURRENCY###",

      // The mode of the transaction
      "test_mode": "###TEST_MODE###",

      // The order no of the transaction
      "order_no": "###TRANSACTION_ORDER_NUMBER###",

      // Need to be specify this for the Redirect payment types to which you need to redirect on SUCCESS
      "return_url": "###YOUR_RETURN_URL###",

      // Need to be specify this for the Redirect payment types to which you need to redirect on FAILURE (optional)
      "error_return_url": "###YOUR_ERROR_RETURN_URL###",

      // The Notify URL value for this particular transaction
      "hook_url": "###HOOK_URL###",

      // The flag to create the token for the payment data - Decomment it based on your usage
      // "create_token": 1,
    };

    // Hosted Payment page customizations
    data.hosted_page = {
      // Change logo in the Hosted payment page
      "logo": "###YOUR_SHOP_LOGO###",

      // Change the styling of the Hosted payment page - Decomment it based on your usage
      // "css_url": "###YOUR_CSS_URL###",

      // Payment types to be displayed in the Hosted Payment Page
      "display_payments": [
          "CREDITCARD",
          "DIRECT_DEBIT_SEPA",
          "INVOICE",
          "IDEAL",
          "ONLINE_TRANSFER",
          "PAYPAL"
      ],

      // Payment types to be hidden in the Hosted Payment Page - Used when necessary and display_payments when not in use
      //"hide_payments": [
      //    "CREDITCARD",
      //    "DIRECT_DEBIT_SEPA",
      //    "INVOICE",
      //    "IDEAL",
      //    "ONLINE_TRANSFER",
      //    "PAYPAL"
      //],  

      // Hide the following sections from the Hosted Payment Page
      "hide_blocks": [
          "ADDRESS_FORM",
          "SHOP_INFO",
          "LANGUAGE_MENU",
          "HEADER",
          "TARIFF"
      ],

      // Customize the display of the following pages
      "skip_pages": [
          "CONFIRMATION_PAGE",
          "SUCCESS_PAGE",
          "PAYMENT_PAGE"
      ]
    };

    let request_data = {
      method: 'POST',
      body: JSON.stringify(data),
      headers: headers
    }

    return fetch(endpoint, request_data)
        .then(response => response.json())
        .then((responseJson) => {
          // Handle Response
          if(responseJson.result.redirect_url && responseJson.transaction.txn_secret) {
            this.setState({
              nnJsonData: responseJson
            })
          } else {
            //Handle the failure cases here
            console.log('Failure message:'+responseJson.result.status_text);
          }
        })
        .catch((error) => {
          //Handle the error
          console.error(error);
        });
    }  

    render() {
      //Load the Payment form URL
      return this.state.nnJsonData ? (
        <WebView
          source={{
              uri: this.state.nnJsonData.result.redirect_url
            }
          }
        />
      ) : null; //Handle the UI loading icon/any other failure info display
    }
}