import React from 'react'
import { wording } from 'src/words'
import { Empty } from 'atoms/Empty'
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,
  CardInformation,
  CardCvv,
  CardCvvInformation,
  StyledPaymentsCardIcon,
  StyledInformationCard,
} 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,
    expiry,
    type,
    cardNumber,
    isSubscriptionPayment,
    isDefaultPayment,
    index,
    onPaymentCardSave,
    ...remainingProps
  } = item
  const cardNumberView = `${type} ${cardNumber}`
  const cardExpiryView = `${wording.expiryPrefix} ${expiry}`

  const paymentCardView = () => {
    return (
      <React.Fragment>
        <CardInformation>
          <NameOnCard content={nameOnCard} />
          <IconWrapper>
            <StyledPaymentsCardIcon type={type} breed={'visaWithBg'} />
            <CardNumber content={cardNumberView} />
          </IconWrapper>
          <CardExpiry content={cardExpiryView} />
        </CardInformation>
        <CardCvvInformation>
          <CardCvv placeholder={'CVV'} />
        </CardCvvInformation>
      </React.Fragment>
    )
  }

  const itemView = isSubscriptionPayment ? (
    <StyledInformationCard
      renderExpandedView={defaultRenderForm}
      renderDefaultView={paymentCardView}
      onPaymentCardSave={onPaymentCardSave}
      item={item}
    />
  ) : (
    paymentCardView()
  )

  return (
    <ItemWrapper key={index} isDefaultPayment={isDefaultPayment}>
      {itemView}
    </ItemWrapper>
  )
}
function defaultRenderForm(
  props: PaymentInformationCardPresetProps,
  state: PaymentInformationCardState
) {
  return <PaymentInformationForm {...props} cardState={state} />
}

export { defaultRenderHeader, defaultRenderItem, defaultRenderForm }