import React from 'react'
import { isObj, isSafe } from 'exotic'
import { CommonState } from 'src/state'
import { Empty } from 'atoms/Empty'
import { Icons } from 'atoms/Icons'
import Ratings from 'molecules/Ratings'
import {
  OrderProductItemContextConsumer,
  ProductItemContextValue,
} from 'abstractions/Order/ProductItem'
import CancelReturnForm from 'presets/Order/CancelReturnForm'
import { ActionButtonGroup } from 'presets/Order/ActionButtonGroup'
import { ProductItemProps } from './typings'
import {
  ProductItemWrapperItem as ProductItemWrapper,
  ProductImage,
  ProductTitle,
  ProductDescription,
  ProductFacets,
  ProductQuantity,
  ProductPrice,
  FrequencyContent,
  ReviewWrapper,
  StyledProductItemId,
  StyledFrequencyWrapper,
} from './styled'

/**
 * mouse over function
 */
function handleMouseOver(state: CommonState) {
  state.focus()
  // console.log('[handleMouseOver] isFocused', state.isFocused)
}

/**
 * mouse out function
 */
function handleMouseOut(state: CommonState) {
  state.blur()
  // console.log('[handleMouseLeave] isFocused', state.isFocused)
}

/**
 * render Product Image
 */
function defaultRenderImage(props: ProductItemProps) {
  const { itemDetails } = props
  const { image } = itemDetails
  if (isSafe(image)) {
    return <ProductImage doAutoAlign src={image} />
  } else {
    return <Empty />
  }
}

/**
 * render Product Name
 */
function defaultRenderName(props: ProductItemProps) {
  const { itemDetails } = props
  const { title } = itemDetails
  if (isSafe(title)) {
    return <ProductTitle content={title} />
  } else {
    return <Empty />
  }
}

/**
 * render Product Description
 */
function defaultRenderDescription(props: ProductItemProps) {
  const { itemDetails, isSubscriptionItem } = props
  const { description } = itemDetails
  if (isSafe(description)) {
    return <ProductDescription content={description} isSubscriptionItem={isSubscriptionItem}/>
  } else {
    return <Empty />
  }
}
// SKU ID

function defaultRenderSkuId(props: ProductItemProps) {
  const { itemDetails, isSubscriptionItem } = props
  const { skuId } = itemDetails
  if (isSafe(skuId)) {
    return <ProductFacets content={'SKU#: ' + skuId} isSubscriptionItem={isSubscriptionItem} />
  } else {
    return <Empty />
  }
}

/**
 * render facet: size
 */
function defaultRenderSize(props: ProductItemProps) {
  const { itemDetails, isSubscriptionItem } = props
  const { size } = itemDetails
  if (isSafe(size)) {
    return <ProductFacets itemprop="additionalProperty" content={'Size: ' + size} isSubscriptionItem={isSubscriptionItem} />
  } else {
    return <Empty />
  }
}

/**
 * render facet: color
 */
function defaultRenderColor(props: ProductItemProps) {
  const { itemDetails, isSubscriptionItem } = props
  const { color } = itemDetails
  if (isSafe(color)) {
    return <ProductFacets itemprop="color" content={'Color: ' + color} isSubscriptionItem={isSubscriptionItem} />
  } else {
    return <Empty />
  }
}

/**
 * render facet: itemId
 */
function defaultRenderItemId(props: ProductItemProps) {
  const { itemDetails } = props
  const { itemid } = itemDetails
  if (isSafe(itemid)) {
    return <StyledProductItemId itemprop="itemid" content={'Item #: ' + itemid} />
  } else {
    return <Empty />
  }
}

/**
 * render Product Price
 */
function defaultRenderPrice(props: ProductItemProps) {
  const { itemDetails, isSubscriptionItem } = props
  const { price, regularPrice, salePrice, ...remainingProps } = itemDetails

  const view =
    isSubscriptionItem
    ? <ProductPrice regularPrice={regularPrice} salePrice={salePrice} isSubscriptionItem={isSubscriptionItem} />
    : <ProductPrice regularPrice={price} />

  return view
}

/**
 * render Product Quantity
 */
function defaultRenderQuantity(props: ProductItemProps) {
  const { itemDetails, isSubscriptionItem } = props
  const { quantity } = itemDetails
  const QuantityComponent = isSubscriptionItem ? ProductFacets : ProductQuantity

  if (isSafe(quantity)) {
    return <QuantityComponent content={'Quantity: ' + quantity} isSubscriptionItem={isSubscriptionItem} />
  } else {
    return <Empty />
  }
}

/**
 * render Product Ratings
 */
function defaultRenderRatings(props: ProductItemProps) {
  const { itemDetails } = props
  const { ratings } = itemDetails
  if (isSafe(ratings)) {
    return <Ratings count={ratings} />
  } else {
    return <Empty />
  }
}

/*
* render Product frequency
*/
function defaultRenderProductFrequency(props: ProductItemProps) {
  return (
    <StyledFrequencyWrapper>
      <Icons breedType={'refresh'} type={'single-refresh'} className={'frequencyIcon'}/>
      <FrequencyContent content={props.itemDetails.frequencyContent} />
    </StyledFrequencyWrapper>
  )
}

/**
 * renders product item action buttons
 */
function defaultRenderProductItemButtons(props: ProductItemProps) {
  // const renderContext = (context: ProductItemContextValue) => {
  //   const { state } = context
  //   return <ProductItemButtonGroup state={state} />
  // }

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

/**
 * renders product item form
 */
function defaultRenderProductItemForm(props: ProductItemProps) {
  // const renderContext = (context: ProductItemContextValue) => {
  //   const { state } = context
  //   return <CancelReturnForm {...props} state={state} />
  // }
  // return (
  //   <OrderProductItemContextConsumer>
  //     {renderContext}
  //   </OrderProductItemContextConsumer>
  // )
  return <Empty />
}

/**
* render Wrapper
*/

function fromPropsToRenderContext(props: ProductItemProps) {
  const { className, children, ...remainingProps } = props
  const renderContext = (context: ProductItemContextValue) => {
    const { props, state } = context
    // console.log('[renderContext] ==> state.isFocused', state.isFocused)
    const onMouseOver = event => handleMouseOver(state)
    const onMouseOut = event => handleMouseOut(state)

    return (
      <ProductItemWrapper
        className={className}
        onMouseOver={onMouseOver}
        onMouseOut={onMouseOut}
      >
        {children}
      </ProductItemWrapper>
    )
  }

  return renderContext
}

function defaultRenderWrapper(props: ProductItemProps) {
  return (
    <OrderProductItemContextConsumer>
      {fromPropsToRenderContext(props)}
    </OrderProductItemContextConsumer>
  )
}

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