import { Icon } from 'features/Icon'
import { T9n } from 'features/T9n'

import { useRecoilState } from 'recoil'

import {
  ScModal,
  ScHeader,
  ScTitle,
  ScText,
  ScButton,
} from './styled'

import { dataForPayHighlights } from '../../storeHighlightsAtoms'

export const ThanksPopup = () => {
  const [dataHighlights, setDataHighlights] = useRecoilState(dataForPayHighlights)

  return (
    <ScModal
      isOpen={dataHighlights.isOpenThanksPopup}
      close={() => setDataHighlights({ ...dataHighlights, isOpenThanksPopup: false })}
      withCloseButton={false}
    >
      <ScHeader>
        <T9n t='thank_you' />
      </ScHeader>
      <Icon refIcon='Check' />
      <ScTitle>
        <T9n t='order_received' />
      </ScTitle>
      <ScText>
        <T9n t='notify_by_email' />
      </ScText>
      <ScButton onClick={() => {
        setDataHighlights({ ...dataHighlights, isOpenThanksPopup: false })
        window.location.reload()
      }}
      >
        Ok
      </ScButton>
    </ScModal>
  )
}
