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 } = props
  const viewType = props.state ? (props.state.isExpanded ? 'list' : 'grid') : props.viewType

  // console.log('[Abstraction/ProductItemList] hasSingleProduct defaultRenderProductItemList: ', hasSingleProduct)
  return list.map((item, index) => renderProductItem({ ...item, hasSingleProduct, viewType, isSubscriptionItem}, index))
}

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

/**
 * render productlist wrapper
 */
function defaultRenderProductListWrapper(props: ProductItemListProps) {
  // console.debug('[Abstraction/ProductItemList] isExpanded State: ')
  // console.dir(props.state.isExpanded)

  const { className, children, ...remainingProps } = props
  const viewType = props.state ? (props.state.isExpanded ? 'list' : 'grid') : props.viewType

  // console.debug('[Abstraction/ProductItemList] viewType: ')
  // console.dir(viewType)

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

export {
  defaultRenderProductItem,
  defaultRenderProductItemList,
  defaultRenderProductListWrapper,
  defaultRenderProductListContainer,
}