import React from 'react'
import { TextPlaceholder } from 'atoms/Placeholder'
import { PaymentInformationForm } from 'abstractions/Subscription/PaymentInformationForm'
import {
  PaymentInformationCardProps,
  PaymentInformationCardState,
  PaymentInformationCardItemProps
} from './typings'
import {
  HeaderWrapper,
} 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 <h1>Abstraction Render Item {item.index}</h1>
}

function defaultRenderList(props: PaymentInformationCardProps, state: PaymentInformationCardState) {
  const { list, renderItem } = props
  const listView = list.map((item, index) => renderItem({...item, index}, 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,
}