import { useState } from 'react';

import msgHandler from '../../utils/iframe/messageHandler';
import { CheckoutProp } from '../../views/Checkout/checkout';
import { TopupProp } from '../../views/Checkout/Topup/topup';

interface ParamsType {
  key: string;
  value: any;
  originId: string;
  successCB?: string;
  failCB?: string;
  completeCB?: string;
  paymentParams: any;
}

function usePayPay() {
  const [checkoutProps, setCheckoutProps] = useState<CheckoutProp>({
    visible: false,
    toggleVisible: (v) => {
      setCheckoutProps({
        ...checkoutProps,
        visible: v,
      });
    },
    paymentParams: { amount: { amount: 0 } },
  });

  const [topupProps, setTopupProps] = useState<TopupProp>({
    visible: false,
    toggleVisible: (v) => {
      setTopupProps({
        ...topupProps,
        visible: v,
      });
    },
  });

  const makePayment = async (data: ParamsType) => {
    const { originId, successCB, failCB, completeCB, ...paymentParams } = data;
    setCheckoutProps({
      ...checkoutProps,
      ...{
        visible: true,
        successCB: (result: any) => msgHandler(originId, successCB, result),
        failCB: (error: any) => msgHandler(originId, failCB, error),
        completeCB: () => msgHandler(originId, completeCB),
        paymentParams,
      },
    });
  };

  const topup = async (data: ParamsType) => {
    const { originId, successCB, failCB, completeCB, ...topupParams } = data;
    setTopupProps({
      ...topupProps,
      ...{
        visible: true,
        successCB: (result: any) => msgHandler(originId, successCB, result),
        failCB: (error: any) => msgHandler(originId, failCB, error),
        completeCB: () => msgHandler(originId, completeCB),
        topupParams,
      },
    });
  };
  return {
    makePayment,
    topup,
    checkoutProps,
    topupProps,
  };
}

export default usePayPay;