import { Loader } from 'features/Loader'
import { MatchPackage, Match } from 'features/BuyMatchPopup/types'
import { T9n } from 'features/T9n'

import { PaymentSystem } from 'config/payments'
import { isMobileDevice } from 'config'

import { useIframePayment } from './hooks'

import {
  LoaderWrapper,
  ScModal,
} from './styled'

export type Props = {
  match: Match,
  open: boolean,
  paymentSystem: PaymentSystem,
  selectedPackage: MatchPackage,
  setIsOpenIframe: (open: boolean) => void,
}

export const IframePayment = ({
  match,
  open,
  paymentSystem,
  selectedPackage,
  setIsOpenIframe,
}: Props) => {
  const {
    error,
    isPaymentProcessing,
    src,
  } = useIframePayment({
    match,
    open,
    paymentSystem,
    selectedPackage,
    setIsOpenIframe,
  })

  return (
    <ScModal isOpen={open} withCloseButton close={() => setIsOpenIframe(false)}>
      {src && open ? (
        <iframe
          title='Payment'
          frameBorder='0'
          src={src}
          height={isMobileDevice ? 450 : 600}
          width='100%'
        />
      ) : (
        <>
          {error ? (
            <T9n t={error} />
          ) : (
            <LoaderWrapper>
              <Loader color='#515151' />
            </LoaderWrapper>
          )}
        </>
      )}
      {
        isPaymentProcessing && (
          <LoaderWrapper>
            <Loader color='#515151' />
            <T9n t='processing' />
          </LoaderWrapper>
        )
      }
    </ScModal>
  )
}