import React from 'react'
import { isObj } from 'exotic'
import {
  TextPlaceholder,
  ImagePlaceholder,
  ParagraphPlaceholder,
  SquarePlaceholder,
} from '@skava/ui/dist/components/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 Facets
 */
function defaultRenderFacets(props: ProductItemPlaceholderProps) {
  return (
    <React.Fragment>
      <TextPlaceholder />
      <TextPlaceholder />
      <TextPlaceholder />
    </React.Fragment>
  )
}

/**
 * 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) {
  const { itemDetails, hasSingleProduct, viewType, currentStoreId, storeId } = props
  const { itemIdentifier, isSubscriptionItem = false } = isObj(itemDetails) && itemDetails
  const {
    renderImage,
    renderName,
    renderDescription,
    renderSkuId,
    renderPrice,
    renderQuantity,
    renderFacets,
    renderRatings,
    renderProductFrequency,
    // renderItemId,
    ...remainingProps
  } = props

  const imageView = currentStoreId === storeId ? (
    <ProductImageWrapper href={'/product/' + itemIdentifier}>
        {renderImage(remainingProps)}
      </ProductImageWrapper>
  ) : renderImage(remainingProps)

  return (
    <ProductItemsWrap isSubscriptionItem={isSubscriptionItem}>
      {imageView}
      <ProductDetails
        itemscope
        itemtype="http://schema.org/Product"
        singleItem={hasSingleProduct}
        viewType={viewType}
      >
        {renderName(remainingProps)}
        {renderDescription(remainingProps)}
        {renderSkuId(remainingProps)}
        {renderFacets(remainingProps)}
        {renderQuantity(remainingProps)}
        {renderRatings(remainingProps)}
        {renderPrice(remainingProps)}
        {remainingProps.isSubscriptionItem &&
          renderProductFrequency(remainingProps)}
      </ProductDetails>
    </ProductItemsWrap>
  )
}

function defaultRenderProductItemAddress(props: ProductItemPlaceholderProps) {
  return <SquarePlaceholder height={'44px'} />
}

function defaultRenderProductItemForm(props: ProductItemPlaceholderProps) {
  return <CancelReturnForm />
}

/**
 * render actions button
 */
function defaultRenderProductItemButtons(props: ProductItemPlaceholderProps) {
  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,
    renderProductItemAddress,
    renderButtonGroup,
    ...remainingProps
  } = props

  const renderContext = (context: ProductItemContextValue) => {
    const { state } = context
    const attributes = {
      state: state,
      ...remainingProps,
    }
    return (
      <React.Fragment>
        {renderProductItemDetails(remainingProps)}
        {renderProductItemAddress(remainingProps)}
        {renderButtonGroup(attributes)}
      </React.Fragment>
    )
  }

  return (
    <OrderProductItemContextConsumer>
      {renderContext}
    </OrderProductItemContextConsumer>
  )
}
function defaultRenderButtonGroup(props: ProductItemPlaceholderProps) {
  const { state, ...remainingProps } = props
  return <ButtonGroup state={state} {...remainingProps} />
}
/**
 * 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,
  defaultRenderFacets,
  defaultRenderRatings,
  defaultRenderProductFrequency,
  defaultRenderProductItemButtons,
  defaultRenderProductItemDetails,
  defaultRenderProductItemForm,
  defaultRenderContainer,
  defaultRenderWrapper,
  defaultRenderButtonGroup,
  defaultRenderProductItemAddress,
}