import { CardStep } from './components/CardStep'
import { ErrorStep } from './components/ErrorStep'
import { SuccessStep } from './components/SuccessStep'
import { PackageSelectionStep } from './components/PackageSelectionStep'
import { SelectSubscriptionStep } from './components/SelectSubscription'

import { Steps } from './types'
import { Modal } from './styled'
import { useBuyMatchPopupStore } from './store'

export * from './store'
export * from './store/helpers'

const components = {
  [Steps.SelectPackage]: PackageSelectionStep,
  [Steps.CardSelection]: CardStep,
  [Steps.Success]: SuccessStep,
  [Steps.Error]: ErrorStep,
  [Steps.SelectSubscription]: SelectSubscriptionStep,
}

export const BuyMatchPopup = () => {
  const {
    close,
    currentStep,
    match,
  } = useBuyMatchPopupStore()

  if (!match || !currentStep) return null

  const Step = components[currentStep]

  // eslint-disable-next-line
  window.onmessage = function (event) {
    if (event.data === 'close') {
      close()
    }
  }

  return (
    <Modal
      isOpen={Boolean(1)}
      close={close}
      withCloseButton={false}
    >
      <Step />
    </Modal>
  )
}
