import React, {useEffect, useState} from 'react';
import {
  SafeAreaView,
  Text,
  StatusBar,
  TouchableOpacity,
  DeviceEventEmitter,
  NativeEventEmitter,
  Alert,
  View,
} from 'react-native';

import VnpayMerchant, {VnpayMerchantModule} from 'react-native-vnpay-merchant';
const eventEmitter = new NativeEventEmitter(VnpayMerchantModule);

const Payment = (props) => {
  const [text, setText] = useState('OpenSDK');
  useEffect(() => {
    // mở sdk
    eventEmitter.addListener('PaymentBack', (e) => {
      console.log('Sdk back!');

      // Đã available trên cả ios, android
      if (e) {
        switch (e.resultCode) {
          case 0:
            console.log('Sdk closed');
            break;
          case -1:
            console.log('Người dùng nhấn back từ sdk để quay lại');
            break;
          case 10: //ios
            console.log(
              'Người dùng nhấn chọn thanh toán qua app thanh toán (Mobile Banking, Ví...)',
            );
            break;
          case 99:
            console.log(
              'Người dùng nhấn back từ trang thanh toán thành công khi thanh toán qua thẻ khi gọi đến http://sdk.merchantbackapp',
            );
        }
      }
    });
    return () => {
      // khi tắt sdk
      eventEmitter.removeAllListeners('PaymentBack');
    };
  }, []);

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <TouchableOpacity
        style={{
          paddingHorizontal: 24,
          paddingVertical: 10,
          backgroundColor: 'blue',
          borderRadius: 10,
        }}
        onPress={() => {
          VnpayMerchant.show({
            iconBackName: 'ic_back',
            paymentUrl:
              'https://sandbox.vnpayment.vn/tryitnow/Home/CreateOrder',
            scheme: 'sampleapp',
            tmn_code: 'FAHASA03',
          });
          setText('Sdk opened');
        }}>
        <Text style={{color: 'white'}}>{text}</Text>
      </TouchableOpacity>
    </View>
  );
};

export default Payment;
