import React from 'react'
import { isObj, isString } from 'exotic'
import { Empty } from '@skava/ui/dist/components/atoms/Empty'
import { ProductItemProps } from 'abstractions/OrderHistory/ProductItem'
import {
  StyledHeading,
  StyledShippingMethod,
  StyledProductItem,
  StyledShippingMethodWrapper,
  ShippingLabel,
  ShippingValue,
  StyledAddressThemed,
  StyledOrderItemWrapper,
} from './styled'
import { ProductItemConfigProps } from './typings'

function defaultRenderRatings() {
  return <Empty />
}
function defaultRenderPromoDetails() {
  return <Empty />
}

function defaultRenderStatus(item: ProductItemConfigProps) {
  const { status } = item
  return (
    <React.Fragment>
      <ShippingLabel content={'status:'} breedType={'h3'} />
      <ShippingValue>{status}</ShippingValue>
    </React.Fragment>
  )
}

function defaultRenderProductDetails(item: ProductItemConfigProps) {
  return (
    <React.Fragment>
      <StyledProductItem
        type={'horizontal'}
        {...item}
        renderRatings={defaultRenderRatings}
        renderPromoDetails={defaultRenderPromoDetails}
      />
    </React.Fragment>
  )
}

function defaultRenderShippingAddress(item: ProductItemConfigProps) {
  const { shippingAddress } = item
  return (
    <StyledAddressThemed title={'shipping address'} address={shippingAddress} />
  )
}

function defaultRenderShippingMethod(item: ProductItemConfigProps) {
  const { shippingMethod } = item

  const label =
    isObj(shippingMethod) &&
    isString(shippingMethod.label) &&
    shippingMethod.label
  const value =
    isObj(shippingMethod) &&
    isString(shippingMethod.value) &&
    shippingMethod.value

  return (
    <React.Fragment>
      <StyledShippingMethodWrapper>
        <StyledHeading breedType={'h4'} content={label} />
        <StyledShippingMethod content={value} />
      </StyledShippingMethodWrapper>
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: ProductItemProps) {
  const { className, children } = props
  const view = (
    <StyledOrderItemWrapper className={className}>
      {children}
    </StyledOrderItemWrapper>
  )
  return view
}

export {
  defaultRenderProductDetails,
  defaultRenderShippingAddress,
  defaultRenderShippingMethod,
  defaultRenderStatus,
  defaultRenderWrapper,
}