import React from 'react'
import { TextPlaceholder, ParagraphPlaceholder } from '@skava/ui/dist/components/atoms/Placeholder'
import { ShippingAddressForm } from '../ShippingAddressForm'
import {
  ShippingAddressCardItemProp,
  ShippingAddressCardProps,
  ShippingAddressCardState,
} from './typings'
import { HeaderWrapper, ShippingCardWrapper, Address, Edit } from './styled'

function defaultRenderItem(
  item: ShippingAddressCardItemProp,
  state: ShippingAddressCardState
) {
  return (
    <ShippingCardWrapper>
      <Address>
        <ParagraphPlaceholder
          widthList={[75, 92, 60, 30]}
          rows={4}
          lineSpacing={8}
          itemHeight={10}
        />
      </Address>
      <Edit>
        <TextPlaceholder width={50} height={12} />
      </Edit>
    </ShippingCardWrapper>
  )
}

function defaultRenderList(
  props: ShippingAddressCardProps,
  state: ShippingAddressCardState
) {
  const { list, onShippingCardSave, renderItem } = props
  const listView = list.map((item, index) =>
    renderItem({ ...item, index, onShippingCardSave }, state)
  )
  return listView
}

function defaultRenderCard(
  props: ShippingAddressCardProps,
  state: ShippingAddressCardState
) {
  const { renderList, ...remainingProps } = props
  return renderList(remainingProps)
}

function defaultRenderForm(
  props: ShippingAddressCardProps,
  state: ShippingAddressCardState
) {
  return <ShippingAddressForm />
}

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

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