import { CardStep } from './components/CardStep'
import { ErrorStep } from './components/ErrorStep'
import { SuccessStep } from './components/SuccessStep'
import { SubscriptionSelectionStep } from './components/SubscriptionSelectionStep'
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.Subscriptions]: SubscriptionSelectionStep,
  [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]

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