import React from 'react'
import { ProductItemProps } from './typings'
import {
  Image,
  Paragraph,
  StyledTextPlaceholder,
  DetailSection,
  ImageSection,
  Wrapper,
} from './styled'
import { FormParagraphTitle } from '../../Order/index'

function defaultRenderPrice(props: ProductItemProps) {
  return <StyledTextPlaceholder width={70} height={12} />
}

function defaultRenderSkuId(props: ProductItemProps) {
  return <StyledTextPlaceholder width={110} height={12} />
}

function defaultRenderDescription(props: ProductItemProps) {
  return (
    <Paragraph
      widthList={[80, 66]}
      rows={2}
      lineSpacing={8}
      itemHeight={10}
    />
  )
}

function defaultRenderTitle(props: ProductItemProps) {
  return <StyledTextPlaceholder width={60} height={15} />
}

function defaultRenderImage(props: ProductItemProps) {
  return <Image width={'100%'} height={150} />
}

function defaultRenderBox(props: ProductItemProps) {
  const {
    renderPrice,
    renderSkuId,
    renderDescription,
    renderTitle,
    renderImage,
    ...remainingProps
  } = props

  const price = renderPrice(remainingProps)
  const skuId = renderSkuId(remainingProps)
  const description = renderDescription(remainingProps)
  const title = renderTitle(remainingProps)
  const image = renderImage(remainingProps)

  return (
    <React.Fragment>
      <ImageSection>{image}</ImageSection>
      <DetailSection>
        {title}
        {skuId}
        {description}
        {price}
      </DetailSection>
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: ProductItemProps) {
  const { className, children } = props
  const passthroughProps = Object.freeze({
    className,
    'data-qa': props['data-qa']
  })
  return <Wrapper {...passthroughProps}>{children}</Wrapper>
}

export {
  defaultRenderPrice,
  defaultRenderSkuId,
  defaultRenderDescription,
  defaultRenderTitle,
  defaultRenderImage,
  defaultRenderBox,
  defaultRenderWrapper
}