import React from 'react'
import { isObj, isSafe } from 'exotic'
import { CommonState } from '@skava/ui/dist/state'
import { Empty } from '@skava/ui/dist/components/atoms/Empty'
import { additionalPaths } from '@skava/ui/dist/components/atoms/MaterialIcon'
import Ratings from 'presets/Ratings'
import {
  OrderProductItemContextConsumer,
  ProductItemContextValue,
} from 'abstractions/Order/ProductItem'
import CancelReturnForm from 'presets/Order/CancelReturnForm'
import { ActionButtonGroup } from 'presets/Order/ActionButtonGroup'
import { ProductItemWrapper } from 'abstractions/Order/ProductItem'
import { ProductItemProps, OptionDetails } from './typings'
import {
  ProductImage,
  ProductTitle,
  ProductDescription,
  ProductFacets,
  ProductQuantity,
  FacetContainer,
  ProductPrice,
  FrequencyContent,
  ReviewWrapper,
  // StyledProductItemId,
  StyledFrequencyWrapper,
  Container,
  Label,
  Value,
  StyledSubscription,
} 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, isSubscriptionItem, hasSingleProduct } = props
  const { image } = itemDetails
  if (isSafe(image)) {
    return (
      <ProductImage
        singleProduct={hasSingleProduct}
        isSubscriptionItem={isSubscriptionItem}
        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 (
      <Container data-qa={'qa-product-id'}>
        <Label>SKU#:</Label>
        <Value>{skuId}</Value>
        {/* <ProductFacets content={'SKU#: ' + skuId} isSubscriptionItem={isSubscriptionItem} /> */}
      </Container>
    )
  } 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 (
      <Container data-qa={'qa-product-quantity'}>
        <Label>Quantity:</Label>
        <Value>{quantity}</Value>
        {/* <QuantityComponent content={'Quantity: ' + quantity} isSubscriptionItem={isSubscriptionItem} /> */}
      </Container>
    )
  } else {
    return <Empty />
  }
}

/**
 * render Product Facets
 */
function defaultRenderFacets(props: ProductItemProps) {
  const { itemDetails, isSubscriptionItem } = props
  const { facets } = itemDetails
  return <FacetContainer list={facets} />
}

/**
 * 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>
      <StyledSubscription
        type={'history'}
        fill={'#F88F22'}
        className={'frequencyIcon'}
        customPaths={additionalPaths}
      />
      <FrequencyContent content={props.itemDetails.frequencyContent} />
    </StyledFrequencyWrapper>
  )
}

function defaultRenderProductItemAddress(props: ProductItemProps) {
  return <Empty />
}

/**
 * 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,
    isSubscriptionItem,
    hasSingleProduct,
    ...remainingProps
  } = props
  const renderContext = (context: ProductItemContextValue) => {
    const { 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}
        singleProduct={hasSingleProduct}
        isSubscriptionItem={isSubscriptionItem}
      >
        {children}
      </ProductItemWrapper>
    )
  }

  return renderContext
}

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

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