import React from 'react'
import { isFunction, isArray } from 'exotic'
import { StyledPromoWrapper } from 'presets/ProductPieces/ProductItemV1'
import {
  StyledPromotionModal,
  Wrapper,
  StyledProductItem,
  StyledProductOptions,
  ExpandableWrapper,
  StyledAddToCartButton,
} from './styled'
import { GridViewProps, VerticalProductItemProps, PromotionStateProps } from './typings'

function defaultRenderButton(props: GridViewProps) {
  const { identifier, onAddToCartClick } = props
  const handleClick = () => {
    const changeArgs = {
      identifier,
    }
    if (isFunction(onAddToCartClick)) {
      onAddToCartClick(changeArgs)
    }
  }
  return (
    <StyledAddToCartButton
      onClick={handleClick}
      breedType={'icon-with-text'}
      iconType={'cart'}
      text={'Add To Cart'}
    />
  )
}

function defaultRenderPromoDetails(props: VerticalProductItemProps) {
  const { promoOffer = [], state } = props
  const promoView = (
    <StyledPromoWrapper>
      {promoOffer.map((promo, index) => {
        return (
          <StyledPromotionModal
            key={index}
            index={index}
            {...promo}
            state={state}
          />
        )
      })}
    </StyledPromoWrapper>
  )
  return promoView
}

function defaultRenderProductOptionList(props: GridViewProps) {
  const { skuProps = {}, onSkuPropsClick, identifier } = props
  const { color, size1, style } = skuProps
  const handleChange = (args: string, name: string) => {
    if (isFunction(onSkuPropsClick)) {
      const changeArgs = {
        type: args,
        value: name,
        identifier,
      }
      onSkuPropsClick(changeArgs)
    }
  }
  const view = (
    <React.Fragment>
      {isArray(color) && (
        <StyledProductOptions
          list={color}
          isDropdown={true}
          type={'color'}
          isProductDetailsPage={false}
          onChange={handleChange}
        />
      )}
      {isArray(size1) && (
        <StyledProductOptions
          list={size1}
          isDropdown={true}
          type={'size'}
          isProductDetailsPage={false}
          onChange={handleChange}
        />
      )}
      {isArray(style) && (
        <StyledProductOptions
          list={style}
          isDropdown={true}
          type={'style'}
          isProductDetailsPage={false}
          onChange={handleChange}
        />
      )}
    </React.Fragment>
  )
  return view
}

function defaultExpandedView(props: GridViewProps) {
  const { renderProductOptionList, renderButton, ...remainingProps } = props
  const view = (
    <ExpandableWrapper>
      {isFunction(renderProductOptionList) &&
        renderProductOptionList(remainingProps)}
      {isFunction(renderButton) && renderButton(remainingProps)}
    </ExpandableWrapper>
  )
  return view
}

function defaultRenderBox(props: GridViewProps, state: PromotionStateProps) {
  const { renderExpandedView, ...remainingProps } = props

  const view = (
    <React.Fragment>
      <StyledProductItem
        {...props}
        state={state}
        renderPromoDetails={defaultRenderPromoDetails}
        type={'vertical'}
      />
      {state.isVisible === false &&
        isFunction(renderExpandedView) &&
        renderExpandedView(remainingProps)}
    </React.Fragment>
  )
  return view
}

function defaultRenderWrapper(props: GridViewProps) {
  const { className, identifier, children, dataQa } = props
  const passThroughProps = {
    key: identifier,
    className,
    'data-qa': dataQa,
  }

  return <Wrapper {...passThroughProps}>{children}</Wrapper>
}

export {
  defaultRenderButton,
  defaultRenderProductOptionList,
  defaultExpandedView,
  defaultRenderWrapper,
  defaultRenderBox,
}