/* eslint-disable react/jsx-no-constructed-context-values */
import type { Dispatch, PropsWithChildren } from "react";
import React, { createContext, useContext, useReducer } from "react";

interface IPaymentContext {
  paymentMethod: string;
  masterpass: {
    showMasterpassBanner: boolean;
    showOtp: boolean;
    updateUser: boolean;
    listManagement: boolean;
    validateTransactionToken: string;
  };
  dispatch: Dispatch<PaymentAction>;
}

type PaymentAction = { type: "SET_PAYMENT"; payload: IPaymentContext };

const paymentReducer = (
  state: IPaymentContext,
  action: PaymentAction,
): IPaymentContext => {
  switch (action.type) {
    case "SET_PAYMENT":
      return {
        ...state,
        paymentMethod: action.payload.paymentMethod,
        masterpass: {
          showMasterpassBanner: action.payload.masterpass.showMasterpassBanner,
          showOtp: action.payload.masterpass.showOtp,
          updateUser: action.payload.masterpass.updateUser,
          listManagement: action.payload.masterpass.listManagement,
          validateTransactionToken:
            action.payload.masterpass.validateTransactionToken,
        },
      };

    default:
      return state;
  }
};

export const PaymentContext = createContext<IPaymentContext>(
  {} as IPaymentContext,
);

export const PaymentCtxProvider: React.FC<PropsWithChildren<{}>> = ({
  children,
}) => {
  const [state, dispatch] = useReducer(paymentReducer, {
    paymentMethod: "",
    masterpass: {
      showMasterpassBanner: false,
      showOtp: false,
      updateUser: false,
      listManagement: false,
      validateTransactionToken: "",
    },
    dispatch: () => {},
  });

  const contextValue: IPaymentContext = {
    ...state,
    dispatch,
  };

  return (
    <PaymentContext.Provider value={contextValue}>
      {children}
    </PaymentContext.Provider>
  );
};

export function usePaymentCtx(): IPaymentContext {
  return useContext(PaymentContext);
}