import React from 'react'
import { isFunction } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import { ProductPieceState } from './state'
import { variantConfig } from '../fixture'
import {
  defaultRenderProductDetails,
  defaultRenderProductImage,
  defaultRenderHoverIcons,
} from './renderProps'
import { Wrapper, ImageWrapper, DetailsWrapper } from './styled'
import { ProductPieceProps } from './typings'

@observer
class ProductPiece extends React.Component<ProductPieceProps> {
  observableState = new ProductPieceState(this.props)

  static defaultProps = {
    className: '',
    // renderProps
    renderProductDetails: defaultRenderProductDetails,
    renderProductImage: defaultRenderProductImage,
    renderHoverIcons: defaultRenderHoverIcons,
    variantConfig: variantConfig,
  }

  handleExpand = () => {
    let { item, onProductUpdate } = this.props
    const variant = item.variant >= 4 ? 0 : item.variant + 1
    this.observableState.updateVariantData(variant)
    const updateParams = {
      product: this.observableState.product,
      shouldRemove: false,
    }
    if (onProductUpdate) {
      onProductUpdate(updateParams)
    }
  }

  handleSwap = () => {
    const { item, onProductUpdate } = this.props
    this.observableState.swapImages(item)
    const updateParams = {
      product: this.observableState.product,
      shouldRemove: false,
    }
    if (onProductUpdate) {
      onProductUpdate(updateParams)
    }
  }

  handleDelete = () => {
    const { onProductUpdate } = this.props
    if (onProductUpdate) {
      const updateParams = {
        product: this.observableState.product,
        shouldRemove: true,
      }
      onProductUpdate(updateParams)
    }
  }

  render() {
    const { variantData } = this.observableState
    const {
      renderProductImage,
      renderProductDetails,
      renderHoverIcons,
      ...remainingProps
    } = this.props
    const view = (
      <Wrapper>
        <ImageWrapper variantData={variantData} draggable={false}>
          {isFunction(renderProductImage) &&
            renderProductImage(remainingProps, variantData)}
        </ImageWrapper>
        <DetailsWrapper>
          {isFunction(renderProductDetails) &&
            renderProductDetails(remainingProps)}
        </DetailsWrapper>
        {isFunction(renderHoverIcons) &&
          renderHoverIcons({
            ...remainingProps,
            handleExpand: this.handleExpand,
            handleSwap: this.handleSwap,
            handleDelete: this.handleDelete,
          })}
      </Wrapper>
    )
    return view
  }
}

export { ProductPiece }
export default ProductPiece