import { useEffect } from 'react'

import { useCardsStore } from 'features/CardsStore'
import { CardStep } from 'features/BuyMatchPopup/components/CardStep'

import { Modal } from './styled'

type Props = {
  btnName?: string,
  changeCardPopupOpen: boolean,
  closeButton?: boolean,
  setChangeCardPopupOpen: (open: boolean) => void,
  title?: string,
}

export const ChangeCardPopup = ({
  btnName,
  changeCardPopupOpen,
  closeButton,
  setChangeCardPopupOpen,
  title,
}: Props) => {
  const { fetchCards } = useCardsStore()

  useEffect(() => {
    fetchCards()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <Modal
      isOpen={changeCardPopupOpen}
      withCloseButton={false}
    >
      <CardStep
        title={title ?? 'change_card'}
        btnName={btnName ?? 'change'}
        closeHandle={() => setChangeCardPopupOpen(false)}
      />
    </Modal>
  )
}
