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

import { useBrazilPayment } from './hooks'

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

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

export const BrazilPayment = ({
  match,
  open,
  selectedPackage,
  setIsOpenBrasilian,
}: Props) => {
  const {
    closePopup,
    error,
    src,
  } = useBrazilPayment({
    match,
    open,
    selectedPackage,
    setIsOpenBrasilian,
  })

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