import React from 'react'
import { PaymentInformationForm } from 'abstractions/Subscription/PaymentInformationForm'
import { TextPlaceholder } from 'atoms/Placeholder'
import {
  PaymentInformationCardProps,
  PaymentInformationCardState,
  PaymentInformationCardItemProps,
} from './typings'
import {
  HeaderWrapper,
  PaymenyCardWrapper,
  Name,
  Card,
  Date,
  EmptyCard,
} from './styled'

function defaultRenderHeader(
  props: PaymentInformationCardProps,
  state: PaymentInformationCardState
) {
  return (
    <HeaderWrapper>
      <TextPlaceholder width={250} height={22} />
      <TextPlaceholder width={350} height={22} onClick={state.handleToggle} />
    </HeaderWrapper>
  )
}

function defaultRenderItem(
  item: PaymentInformationCardItemProps,
  state: PaymentInformationCardState
) {
  return (
    <PaymenyCardWrapper>
      <Name>
        <TextPlaceholder width={60} height={12} />
      </Name>
      <Card>
        <EmptyCard width={50} height={30} />
        <TextPlaceholder width={150} height={12} />
      </Card>
      <Date>
        <TextPlaceholder width={160} height={14} />
      </Date>
    </PaymenyCardWrapper>
  )
}

function defaultRenderList(
  props: PaymentInformationCardProps,
  state: PaymentInformationCardState
) {
  const { list, onPaymentCardSave, renderItem } = props
  const listView = list.map((item, index) =>
    renderItem({ ...item, index, onPaymentCardSave }, state)
  )
  return listView
}

function defaultRenderCard(
  props: PaymentInformationCardProps,
  state: PaymentInformationCardState
) {
  const { renderList, ...remainingProps } = props
  const cardView = renderList({ ...remainingProps }, state)
  return cardView
}

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

export {
  defaultRenderHeader,
  defaultRenderItem,
  defaultRenderList,
  defaultRenderCard,
  defaultRenderForm,
}