'use client';

import { RootState } from 'redux/store';
import { useAppSelector } from '../redux/hooks';
import dynamic, { DynamicOptionsLoadingProps } from 'next/dynamic';
import { PaymentOptionViews } from 'views/checkout/steps/payment';
import { JSX, useMemo } from 'react';

const fallbackView = () => <></>;

const paymentTypeToView = {
  bkm_express: 'bkm',
  credit_card: 'credit-card',
  credit_payment: 'credit-payment',
  funds_transfer: 'funds-transfer',
  gpay: 'gpay',
  loyalty_money: 'loyalty',
  masterpass: 'credit-card',
  masterpass_rest: 'masterpass-rest',
  pay_on_delivery: 'pay-on-delivery',
  redirection: 'redirection',
  saved_card: 'saved-card'
  // Add other mappings as needed
};

interface SelectedPaymentOptionViewProps {
  loader?: (loadingProps: DynamicOptionsLoadingProps) => JSX.Element;
}

export default function SelectedPaymentOptionView({
  loader: Loader
}: SelectedPaymentOptionViewProps) {
  const { payment_option, wallet_method } = useAppSelector(
    (state: RootState) => state.checkout.preOrder
  );

  const Component = useMemo(
    () =>
      dynamic(
        async () => {
          const customOption = PaymentOptionViews.find(
            (opt) => opt.slug === payment_option?.slug
          );

          if (customOption) {
            const Component = customOption?.view;

            const componentWrapper = () => <Component />;

            return new Promise((resolve) => {
              resolve(componentWrapper);
            });
          }

          if (
            payment_option?.payment_type === 'wallet' &&
            wallet_method === 'apple_pay'
          ) {
            const mod = await import('@akinon/pz-apple-pay');

            return typeof mod?.default === 'function'
              ? mod.default
              : fallbackView;
          } else if (
            payment_option?.payment_type === 'wallet' &&
            wallet_method === 'cybersource_uc'
          ) {
            const mod = await import('@akinon/pz-cybersource-uc');

            return typeof mod?.CyberSourceUcPaymentOption === 'function'
              ? mod.CyberSourceUcPaymentOption
              : fallbackView;
          }

          if (
            payment_option?.payment_type === 'wallet' &&
            wallet_method === 'checkout_flow'
          ) {
            const mod = await import('@akinon/pz-flow-payment');

            return typeof mod?.default === 'function'
              ? mod.default
              : fallbackView;
          }

          const view = paymentTypeToView[payment_option?.payment_type] || null;

          if (view) {
            try {
              const mod = await import(
                `views/checkout/steps/payment/options/${view}`
              );
              return mod.default || fallbackView;
            } catch (error) {
              return fallbackView;
            }
          }

          return fallbackView;
        },
        { ssr: false, loading: Loader || undefined }
      ),
    [payment_option?.pk]
  );

  return <Component />;
}