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 defaultRenderProductImage(
  props: ProductPieceProps,
  variantData: VariantConfigProps
) {
  const { item } = props
  let imagesView: Array<String> = []
  if (variantData.imageCount) {
    item.images.some((image: string, index: number) => {
      imagesView.push(<ProductImage src={image} alt={item.title} nowrap />)
      if (index + 1 === variantData.imageCount) {
        return true
      }
    })
    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,
}