import React from 'react'
import CartIcon from 'atoms/Icons/CartIcon'
import HeartIcon from 'atoms/Icons/HeartIcon'
import { ProductItemProps } from './typings'
import {
  ProductItemWrapper,
  ProductImage,
  ProductTitle,
  ProductPricePanel,
  RegularPrice,
  SalePrice,
  StyledRatings,
  FavouriteButton,
  AddtoCartButton,
  OfferLabel,
} from './styled'

function defaultRenderImage(props: ProductItemProps) {
  const { image } = props.productItemData
  return <ProductImage src={image} />
}

function defaultRenderTitle(props: ProductItemProps) {
  const { title } = props.productItemData
  return <ProductTitle content={title} />
}

function defaultRenderPrice(props: ProductItemProps) {
  const { price } = props.productItemData
  const { regular, sale } = price
  return (
    <ProductPricePanel>
      <SalePrice content={sale} />
      <RegularPrice content={regular} />
    </ProductPricePanel>
  )
}

function defaultRenderOfferInfo(props: ProductItemProps) {
  const { offers } = props.productItemData
  return <OfferLabel content={offers} />
}

function defaultRenderRatings(props: ProductItemProps) {
  const { ratings } = props.productItemData
  return <StyledRatings value={4} count={24} />
}

function defaultRenderAddToCartButton(props: ProductItemProps) {
  return (
    <AddtoCartButton>
      <CartIcon />
    </AddtoCartButton >
  )
}

function defaultRenderFavouriteButton(props: ProductItemProps) {
  return (
    <FavouriteButton>
      <HeartIcon />
    </FavouriteButton >
  )
}

function defaultRenderTemplate(props: ProductItemProps) {
  const {
    renderImage,
    renderTitle,
    renderPrice,
    renderOfferInfo,
    renderRatings,
    renderAddToCartButton,
    renderFavouriteButton,
    ...remainingProps
  } = props

  return (
    <React.Fragment>
      {renderImage(remainingProps)}
      {renderTitle(remainingProps)}
      {renderPrice(remainingProps)}
      {renderOfferInfo(remainingProps)}
      {renderRatings(remainingProps)}
      {renderAddToCartButton(remainingProps)}
      {renderFavouriteButton(remainingProps)}
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: ProductItemProps) {
  const { className, children } = props
  return <ProductItemWrapper classNam={className}>{children}</ProductItemWrapper>
}

export {
  defaultRenderImage,
  defaultRenderTitle,
  defaultRenderPrice,
  defaultRenderOfferInfo,
  defaultRenderRatings,
  defaultRenderAddToCartButton,
  defaultRenderFavouriteButton,
  defaultRenderTemplate,
  defaultRenderWrapper,
}