import { currencySymbols } from 'config'

import { T9n } from 'features/T9n'
import {
  CloseButton,
  Header,
  HeaderActions,
  HeaderTitle,
} from 'features/PopupComponents'

import { useBuyMatchPopupStore } from '../../store'
import { SubscriptionsList } from '../SubscriptionsList'
import {
  Wrapper,
  Footer,
  Button,
  Body,
} from '../../styled'

export const ConfirmationStep = () => {
  const {
    close,
    selectedSubscriptions,
    subscribeToMatches,
    totalPrice,
  } = useBuyMatchPopupStore()

  return (
    <Wrapper>
      <Header height={50}>
        <HeaderTitle>
          <T9n t='payment_confirmation' />
        </HeaderTitle>
        <HeaderActions position='right'>
          <CloseButton onClick={close} />
        </HeaderActions>
      </Header>
      <Body marginTop={25}>
        <SubscriptionsList subscriptions={selectedSubscriptions} />
      </Body>
      <Footer marginTop={35}>
        <Button onClick={subscribeToMatches}>
          <T9n t='buy_for' /> {totalPrice} {currencySymbols.ruble}
        </Button>
      </Footer>
    </Wrapper>
  )
}
