import React from 'react'
import { Empty } from 'atoms/Empty'
import {
  ProductImage,
  ProductDescription,
  ProductImageWithCaption,
} from 'presets/ProductPieces'
import {
  ProductItem,
  ProductItemProps,
} from 'presets/BundleCollection/ProductItem'
import {
  ProductList,
  ProductListProps,
  Header,
} from 'presets/BundleCollection/ProductList'
import {
  StyledHeading,
  StyledBrandName,
  StyledProductName,
  StyledProductPrice,
  StyledQuantity,
  StyledRatingTitle,
  StyledWriteReview,
  StyledRating,
  StyledProductImage,
  StyledProductIdentifier,
  StyledProductDescription,
} from 'presets/BundleCollection/ProductItem/styled'

const createItemRenderProps = data => {
  const renderRating = (props: ProductItemProps) => {
    return 'I am the renderProp to override defaultRenderRating()'
  }
  const handleWriteReview = args => {
    console.log('[Handler] handleWriteReview', args)
  }
  const handlePrimaryButton = args => {
    console.log('[Handler] handlePrimaryButton', args)
  }
  const handleSecondaryButton = args => {
    console.log('[Handler] handleSecondaryButton', args)
  }
  const handleCheckboxInputChange = args => {
    console.log('[Handler] handleCheckboxInputChange', args)
  }
  const handleQuantityInputChange = args => {
    console.log('[Handler] handleQuantityInputChange', args)
  }

  return {
    renderRating,
    //
    handleWriteReview,
    handlePrimaryButton,
    handleSecondaryButton,
    handleCheckboxInputChange,
    handleQuantityInputChange,
  }
}

const createListRenderProps = data => {
  const renderItem = (props: ProductItemProps) => {
    const { item, index } = props
    const {
      renderRating,
      //
      handleWriteReview,
      handlePrimaryButton,
      handleSecondaryButton,
      handleCheckboxInputChange,
      handleQuantityInputChange,
    } = createItemRenderProps(item)

    const attributes = {
      renderRating,
      //
      handleWriteReview,
      handlePrimaryButton,
      handleSecondaryButton,
      handleCheckboxInputChange,
      handleQuantityInputChange,
    }
    return (
      <ProductItem
        key={index}
        item={item}
        index={index}
        onWriteReviewClick={handleWriteReview}
        onPrimaryButtonClick={handlePrimaryButton}
        onSecondaryButtonClick={handleSecondaryButton}
        onCheckBoxInputChange={handleCheckboxInputChange}
        onQuantityInputChange={handleQuantityInputChange}
        {...attributes}
      />
    )
  }

  return {
    renderItem,
  }
}

class PdpCollectionThemed extends React.Component {
  render() {
    const { renderItem } = createListRenderProps(this.props)

    const attributes = {
      renderItem,
      ...this.props,
    }

    return <ProductList {...attributes} />
  }
}

export { PdpCollectionThemed }
export default PdpCollectionThemed