import isEmpty from 'lodash/isEmpty'

import { AddCardFormInner } from 'features/AddCardForm/components/Form'
import { useCardsStore } from 'features/CardsStore'
import { useBuyMatchPopupStore } from 'features/BuyMatchPopup/store'
import {
  CloseButton,
  HeaderActions,
} from 'features/PopupComponents'
import { T9n } from 'features/T9n'

import { CardsList } from '../CardsList'

import {
  Wrapper,
  Body,
  Header,
  HeaderTitle,
  Button,
} from '../../styled'

export const CardStep = () => {
  const { cards } = useCardsStore()
  const { close, goBack } = useBuyMatchPopupStore()

  const emptyCards = isEmpty(cards)

  return (
    <Wrapper width={642}>
      <Header>
        <HeaderTitle>
          <T9n t='pay' />
        </HeaderTitle>
        <HeaderActions position='right'>
          <CloseButton onClick={close} />
        </HeaderActions>
      </Header>
      <Body padding='12px 40px 0 40px'>
        <CardsList />
        <AddCardFormInner
          onAddSuccess={goBack}
          initialformOpen={emptyCards}
          inputsBackground='rgba(255, 255, 255, 0.1)'
        >
          <Button type='submit'>
            <T9n t='add' />
          </Button>
        </AddCardFormInner>
      </Body>
    </Wrapper>
  )
}
