import React from 'react'
import { wording } from 'src/words'
import { Empty } from 'atoms/Empty'
import { PaymentsCardIcon } from 'atoms/Icons'
import { HeaderWrapper, PaymentInformationCardState } from 'abstractions/Subscription/PaymentInformationCard'
import { PaymentInformationForm } from 'presets/Subscription/PaymentInformationForm'
import { PaymentInformationCardPresetProps, PaymentInformationCardItemPresetProps } from './typings'
import {
  StyledLabel,
  StyledButton,
  ItemWrapper,
  IconWrapper,
  CardNumber,
  CardExpiry,
  NameOnCard,
} from './styled'

function defaultRenderHeader(props: PaymentInformationCardPresetProps, state: PaymentInformationCardState) {
  const addPaymentView = (state.isExpanded === false)
  ? <StyledButton onClick={state.handleToggle}>{wording.addNewPaymentText}</StyledButton>
  : <Empty />

  return (
    <HeaderWrapper>
      <StyledLabel>{wording.paymentHeaderLabel}</StyledLabel>
      {addPaymentView}
    </HeaderWrapper>
  )
}

function defaultRenderItem(item: PaymentInformationCardItemPresetProps, state: PaymentInformationCardState) {
  const { nameOnCard } = item
  return (
    <ItemWrapper>
      <NameOnCard  content={nameOnCard} />
      <IconWrapper>
        <PaymentsCardIcon type={'visa'} breed={'visaWithBg'} />
        <CardNumber content={'Visa XXXX - 1234'} />
      </IconWrapper>
      <CardExpiry content={'Exp. 06/2022'} />
    </ItemWrapper>
  )
}

function defaultRenderForm(props: PaymentInformationCardPresetProps, state: PaymentInformationCardState) {
  return <PaymentInformationForm state={state} />
}

export {
  defaultRenderHeader,
  defaultRenderItem,
  defaultRenderForm,
}