import React from 'react'
import { MaterialIcon } from 'atoms/MaterialIcon'
import { ProductItemProps } from './typings'
import {
  ProductItemWrapper,
  ProductImage,
  ProductTitle,
  ProductPricePanel,
  RegularPrice,
  SalePrice,
  StyledRatings,
  ButtonContainer,
  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>
      <MaterialIcon type="cart" />
    </AddtoCartButton>
  )
}

function defaultRenderFavouriteButton(props: ProductItemProps) {
  return (
    <FavouriteButton>
      <MaterialIcon type="favorite" />
    </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)}
      <ButtonContainer>
        {renderAddToCartButton(remainingProps)}
        {renderFavouriteButton(remainingProps)}
      </ButtonContainer>
    </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,
}