import React from 'react'
import {
  TextPlaceholder,
  ImagePlaceholder,
  ParagraphPlaceholder,
  SquarePlaceholder,
} from 'atoms/Placeholder'
import { ProductItemPlaceholderProps, ProductItemContextValue } from './typings'
import { CancelReturnForm } from '../CancelReturnForm'
import { OrderProductItemContextConsumer } from './Context'
import {
  ProductItemWrapper,
  ProductItemsWrap,
  ProductDetails,
  ProductImageWrapper,
  ButtonWrapper,
  ProductFacetsWrapper,
  QuantityWrapper,
  ReviewWrapper,
  FrequencyWrapper,
} from './styled'
import { ButtonGroup } from './ButtonGroup'

/**
 * render Product Image
 */
function defaultRenderImage(props: ProductItemPlaceholderProps) {
  return <ImagePlaceholder width={'160px'} height={'120px'} />
}

/**
 * render Product Name
 */
function defaultRenderName(props: ProductItemPlaceholderProps) {
  return <TextPlaceholder />
}

/**
 * render Product Description
 */
function defaultRenderDescription(props: ProductItemPlaceholderProps) {
  return (
    <ParagraphPlaceholder
      itemHeight={10}
      widthList={[50, 80, 60]}
      rows={3}
      lineSpacing={10}
    />
  )
}

 // SKU ID
function defaultRenderSkuId(props: ProductItemPlaceholderProps) {
  return <TextPlaceholder />
}
/**
 * render Product Facets
 */
// SIZE
function defaultRenderSize(props: ProductItemPlaceholderProps) {
  return <TextPlaceholder />
}
// COLOR
function defaultRenderColor(props: ProductItemPlaceholderProps) {
  return <TextPlaceholder />
}
// ITEMID
function defaultRenderItemId(props: ProductItemPlaceholderProps) {
  return <TextPlaceholder />
}

/**
 * render Product Price
 */
function defaultRenderPrice(props: ProductItemPlaceholderProps) {
  return <TextPlaceholder width={'70%'} />
}

/**
 * render Product Quantity
 */
function defaultRenderQuantity(props: ProductItemPlaceholderProps) {
  return <TextPlaceholder width={'60%'} />
}

/**
 * render Product Ratings
 */
function defaultRenderRatings(props: ProductItemPlaceholderProps) {
  return <TextPlaceholder />
}

/**
 * render Product Frequency
 */
function defaultRenderProductFrequency(props: ProductItemPlaceholderProps) {
  return (
    <FrequencyWrapper>
      <SquarePlaceholder width={15} style={{marginRight: '15px'}} />
      <TextPlaceholder />
    </FrequencyWrapper>
  )
}

/**
 * render Product Item details
 */
function defaultRenderProductItemDetails(props: ProductItemPlaceholderProps) {
  // console.log('[abstraction/props] defaultRenderProductItemDetails', props)
  const { hasSingleProduct, viewType, itemid } = props.itemDetails
  const {
    renderImage,
    renderName,
    renderDescription,
    renderSkuId,
    renderPrice,
    renderQuantity,
    renderRatings,
    renderProductFrequency,
    renderSize,
    renderColor,
    renderItemId,
    ...remainingProps
  } = props

  return (
    <ProductItemsWrap>
      <ProductImageWrapper href={'/product/' + itemid}>{renderImage(remainingProps)}</ProductImageWrapper>
      <ProductDetails itemscope itemtype="http://schema.org/Product" singleItem={hasSingleProduct} viewType={viewType} >
        {renderName(remainingProps)}
        {renderDescription(remainingProps)}
        {renderSkuId(remainingProps)}
        {renderSize(remainingProps)}
        {renderColor(remainingProps)}
        {renderItemId(remainingProps)}
        {renderQuantity(remainingProps)}
        {renderRatings(remainingProps)}
        {renderPrice(remainingProps)}
        {remainingProps.isSubscriptionItem && renderProductFrequency(remainingProps)}
      </ProductDetails>
    </ProductItemsWrap>
  )
}

function defaultRenderProductItemForm(props: ProductItemPlaceholderProps) {
  console.log('[Abstraction/Order] ProductItem Form')
  return <CancelReturnForm />
}

/**
 * render actions button
 */
function defaultRenderProductItemButtons(props: ProductItemPlaceholderProps) {
  console.log('[Abstraction/Order] ProductItem Buttons')
  return (
    <React.Fragment>
      <ButtonWrapper>
        <SquarePlaceholder height={'44px'} />
      </ButtonWrapper>
      <ButtonWrapper>
        <SquarePlaceholder height={'44px'} />
      </ButtonWrapper>
      <ReviewWrapper>
        <SquarePlaceholder height={'44px'} />
      </ReviewWrapper>
    </React.Fragment>
  )
}

/**
 * render container
 */
function defaultRenderContainer(props: ProductItemPlaceholderProps) {
  const {
    renderProductItemDetails,
    ...remainingProps
  } = props

  const renderContext = (context: ProductItemContextValue) => {
    const { state } = context
    // console.info('[Abstraction/Order] ProductItem')
    // console.dir(props)
    return (
      <React.Fragment>
        {renderProductItemDetails(remainingProps)}
        <ButtonGroup state={state} {...remainingProps} />
      </React.Fragment>
    )
  }

  return (
    <OrderProductItemContextConsumer>
      {renderContext}
    </OrderProductItemContextConsumer>
  )
}

/**
 * render Wrapper
 */
function defaultRenderWrapper(props: ProductItemPlaceholderProps) {
  const { className, children, hasSingleProduct, ...remainingProps } = props
  return (
    <ProductItemWrapper className={className} singleItem={hasSingleProduct}>{children}</ProductItemWrapper>
  )
}

export {
  defaultRenderImage,
  defaultRenderName,
  defaultRenderDescription,
  defaultRenderSkuId,
  defaultRenderSize,
  defaultRenderColor,
  defaultRenderItemId,
  defaultRenderPrice,
  defaultRenderQuantity,
  defaultRenderRatings,
  defaultRenderProductFrequency,
  defaultRenderProductItemButtons,
  defaultRenderProductItemDetails,
  defaultRenderProductItemForm,
  defaultRenderContainer,
  defaultRenderWrapper,
}