import SelectedPaymentOptionView from '@akinon/next/components/selected-payment-option-view';
import { useAppSelector } from '@akinon/next/redux/hooks';
import { CheckoutPaymentOption } from '@akinon/next/types';
import { partAttrs } from '@akinon/pz-theme/src/utils/part-styles';
import clsx from 'clsx';
import { RootState } from '@theme/redux/store';
import PaymentOptionButtons from './payment-option-buttons';

export const PaymentOptionViews: Array<CheckoutPaymentOption> = [];

const PaymentStep = () => {
  const isPaymentStepBusy = useAppSelector(
    (state: RootState) => state.checkout.steps.payment.busy
  );

  return (
    <div
      className={clsx('flex flex-wrap w-full', {
        'pointer-events-none opacity-30': isPaymentStepBusy
      })}
      {...partAttrs('section')}
    >
      <div
        className="w-full mt-4 flex justify-start border border-gray-400 -mb-px z-10 md:mt-0 md:border-r-0 md:border-b-0 md:w-auto order-2 md:order-none overflow-x-auto"
        {...partAttrs('payment-options')}
      >
        <PaymentOptionButtons />
      </div>
      <div
        className="w-full border border-solid border-gray-400 bg-white"
        {...partAttrs('payment-panel')}
      >
        <SelectedPaymentOptionView />
      </div>
    </div>
  );
};

export default PaymentStep;