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

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

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

  return (
    <ProductItemListWrapper singleProduct={hasSingleProduct} className={className} viewType={viewType} isSubscriptionItem={isSubscriptionItem}>
      {children}
    </ProductItemListWrapper>
  )
}

export {
  defaultRenderProductItem,
  defaultRenderProductItemList,
  defaultRenderProductListWrapper,
  defaultRenderProductListContainer,
}