import React from 'react'
import { MaterialIcon } from 'atoms/MaterialIcon'
import { ProductItemProps } from './typings'
import { ColorList, FitList, StyleList } from './fixture'
import {
  ProductItemWrapper,
  ProductImage,
  ProductTitle,
  ProductPricePanel,
  RegularPrice,
  SalePrice,
  StyledRatings,
  ButtonsPanel,
  FavouriteButton,
  AddtoCartButton,
  OfferLabel,
  FacetsPanel,
  StyledSelectDropDown,
} from './styled'

const renderAddToCartIcon = (props: ProductItemProps) => (
  <MaterialIcon type="cart" />
)
const renderFavIcon = (props: ProductItemProps) => (
  <MaterialIcon type="favorite_border" />
)

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
      breedType="icon-with-text"
      text="Add To Cart"
      renderIcon={renderAddToCartIcon}
    />
  )
}

function defaultRenderFacetList(props: ProductItemProps) {
  return (
    <FacetsPanel>
      <StyledSelectDropDown options={ColorList} />
      <StyledSelectDropDown options={StyleList} />
      <StyledSelectDropDown options={FitList} />
    </FacetsPanel>
  )
}
function defaultRenderFavouriteButton(props: ProductItemProps) {
  return (
    <FavouriteButton
      breedType="icon-with-text"
      text="Save"
      renderIcon={renderFavIcon}
    />
  )
}

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

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

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

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