import { PaymentProvider } from '@blocklet/payment-react';
import React from 'react';
import { useParams } from 'react-router-dom';

import { useSessionContext } from '../../contexts/session';

const pages = {
  pay: React.lazy(() => import('./pay')),
  'pricing-table': React.lazy(() => import('./pricing-table')),
};

function Checkout() {
  const { action, id } = useParams<{ action: string; id: string }>();

  // @ts-ignore
  const TabComponent = pages[action];

  return <TabComponent id={id} />;
}

export default function WrappedAdmin() {
  const { session, connectApi } = useSessionContext();

  return (
    <PaymentProvider session={session} connect={connectApi}>
      <Checkout />
    </PaymentProvider>
  );
}
