import React from 'react'
import { SeparateDrop } from './SeparateDrop'
import { DraggableStateProps, ProductProps, OptionProps } from './typings'
import { FilterOptionProps } from './ProductListFilter/typings'
import { ProductFilterOptions } from './ProductListFilter/ProductFilterOptions'
import { Placeholder, PlaceholderWrapper } from './styled'
import { ProductPiece } from './ProductPiece'

function defaultRenderProductList(state: DraggableStateProps) {
  const renderproductPiece = (item: ProductProps) => (
    <ProductPiece
      value={item.id}
      item={item}
      onProductUpdate={state.updateProducts}
    />
  )
  const productList = state.products.map((item: ProductProps) => {
    return (
      <SeparateDrop
        onDragEnd={state.onDragEnd}
        key={item.id}
        item={item}
        value={item.id}
        onDragOver={state.onDragOver}
        onProductUpdate={state.updateProducts}
        children={renderproductPiece(item)}
      />
    )
  })
  return productList
}

export { defaultRenderProductList }