import styled, { css } from 'styled-components/macro'

import { isMobileDevice } from 'config/userAgent'
import capitalize from 'lodash/capitalize'

import { useCardsStore } from 'features/CardsStore'
import { ButtonOutline } from 'features/Common'
import { T9n } from 'features/T9n'
import { useBuyMatchPopupStore } from 'features/BuyMatchPopup/store'
import { Steps } from 'features/BuyMatchPopup/types'

const Wrapper = styled.div`
  display: flex;
  margin-top: 25px;
  padding: 0 40px;
  ${isMobileDevice
    ? css`
     padding: 0;
     justify-content: center;
     align-items: center;
    `
    : ''};
`

const CardInfo = styled.span`
  font-weight: 500;
  font-size: 18px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.7);
  ${isMobileDevice
    ? css`
     font-size: 14px;
    `
    : ''};
`

const ChangeCardButton = styled(ButtonOutline)`
  border: none;
  width: auto;
  height: auto;
  padding: 0 10px;
  margin-left: 10px;
  line-height: 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;

  :hover {
    color: rgba(255, 255, 255);
  }
  ${isMobileDevice
    ? css`
     font-size: 12px;
    `
    : ''};
`

export const SelectedCard = () => {
  const { goTo } = useBuyMatchPopupStore()
  const { defaultCard } = useCardsStore()

  if (!defaultCard) return null

  return (
    <Wrapper>
      <CardInfo>{capitalize(defaultCard?.brand)} •••• {defaultCard?.last4}</CardInfo>
      <ChangeCardButton onClick={(e) => goTo(Steps.CardSelection, e)}>
        <T9n t='change_card' />
      </ChangeCardButton>
    </Wrapper>
  )
}
