import React from 'react'
import { additionalPaths } from 'atoms/MaterialIcon'
import { VariantConfigProps } from '../typings'
import {
  ProductImage,
  ProductName,
  ProductPrice,
  StyledCloseIcon,
  StyledExpandIcon,
  StyledSwapIcon,
} from './styled'
import { ProductPieceProps, ProductHoverPropType } from './typings'

function defaultRenderHoverIcons(props: ProductHoverPropType) {
  const { handleExpand, handleSwap, handleDelete } = props
  return (
    <React.Fragment>
      <StyledCloseIcon
        type={'close_icon'}
        data-qa={'qa-remove-product-icon'}
        onClick={handleDelete}
      />
      <StyledExpandIcon
        customPaths={additionalPaths}
        type={'expand'}
        data-qa={'qa-expand-icon'}
        onClick={handleExpand}
      />
      <StyledSwapIcon
        customPaths={additionalPaths}
        type={'swap'}
        data-qa={'qa-swap-image-icon'}
        onClick={handleSwap}
      />
    </React.Fragment>
  )
}

function filterImages(imagesList: Array<String>, imageCount: number) {
  const images = imagesList.filter((image: String, index: number) => {
    if (index + 1 <= imageCount) {
      return true
    }
  })
  return images
}
function defaultRenderProductImage(
  props: ProductPieceProps,
  variantData: VariantConfigProps
) {
  const { item } = props
  if (variantData.imageCount) {
    const images = filterImages(item.images, variantData.imageCount)
    const imagesView = images.map(image => {
      return <ProductImage src={image} alt={item.title} nowrap />
    })
    return imagesView
  }
  return <ProductImage src={item.images[0]} alt={item.title} nowrap />
}

function defaultRenderProductDetails(props: ProductPieceProps) {
  const { item } = props
  return (
    <React.Fragment>
      <ProductName>{item.title}</ProductName>
      <ProductPrice>{item.price}</ProductPrice>
    </React.Fragment>
  )
}

export {
  defaultRenderHoverIcons,
  defaultRenderProductImage,
  defaultRenderProductDetails,
}