import React from 'react'
import { ProductItem as ProductItemPlaceholder } from '../ProductItem'
import { ProductItemListProps, ProductItemProps } from './typings'
import { ProductItemListWrapper, ProductItemListContainer } from './styled'

/**
 * render item
 */
function defaultRenderProductItem(itemProps: ProductItemProps, index: number) {
  return <ProductItemPlaceholder key={index} {...itemProps} />
}

/**
 * render List Wrapper
 */
function defaultRenderProductItemList(props: ProductItemListProps) {
  const {
    list,
    hasSingleProduct,
    renderProductItem,
    isSubscriptionItem,
    renderButtonGroup,
    renderProductItemAddress,
    ...remainingProps
  } = props
  const viewType = props.state ? (props.state.isExpanded ? 'list' : 'grid') : props.viewType
  return list.map((item, index) =>
          renderProductItem({
            ...item,
            hasSingleProduct,
            viewType,
            isSubscriptionItem,
            renderButtonGroup,
            renderProductItemAddress,
            ...remainingProps
          }, index))
}

function defaultRenderProductListContainer(props: ProductItemListProps) {
  const { renderProductItemList } = props
  const productItemListView = renderProductItemList(props)
  return (
    <ProductItemListContainer>{productItemListView}</ProductItemListContainer>
  )
}

/**
 * render productlist wrapper
 */
function defaultRenderProductListWrapper(props: ProductItemListProps) {
  const { className, children, hasSingleProduct, isSubscriptionItem, dataQa, ...remainingProps } = props
  const viewType = props.state ? (props.state.isExpanded ? 'list' : 'grid') : props.viewType

  const passThroughProps = {
    'data-qa': dataQa,
    singleProduct: hasSingleProduct,
    className,
    viewType,
    isSubscriptionItem,
  }
  return (
    <ProductItemListWrapper {...passThroughProps}>
      {children}
    </ProductItemListWrapper>
  )
}

export {
  defaultRenderProductItem,
  defaultRenderProductItemList,
  defaultRenderProductListWrapper,
  defaultRenderProductListContainer,
}