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

import { useBrazilPayment } from './hooks'

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

import { Button } 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,
    matchLink,
    src,
  } = useBrazilPayment({
    match,
    open,
    selectedPackage,
    setIsOpenBrasilian,
  })

  return (
    <ScModal isOpen={open} withCloseButton close={closePopup}>
      {src && open ? (
        <>
          <iframe title='BrazilPayment' src={src} height={600} width='100%' />
          <ScButton>
            <Button>
              <a href={matchLink} style={{ color: 'white' }}>
                <T9n t='watch_match' />
              </a>
            </Button>
          </ScButton>
        </>
      ) : (
        <>
          {error ? (
            <T9n t={error} />
          ) : (
            <LoaderWrapper>
              <Loader color='#515151' />
            </LoaderWrapper>
          )}
        </>
      )}
    </ScModal>
  )
}