import React from 'react'
import { isFunction, isArray, isObj } from 'exotic'
import { StoreProductListProps, StoreProductItemProps } from './typings'
import {
  StyledPlaceHolderIcon,
  StyledPlaceHolderText,
  HeaderWrapper,
  StyledProductItemList,
  StoreItemWrapper,
  StoreProductListWrapper,
} from './styled'

function defaultRenderHeading(props: StoreProductItemProps) {
  const view = (
    <HeaderWrapper>
      <StyledPlaceHolderIcon width={24} height={24} />
      <StyledPlaceHolderText width={150} height={18} />
    </HeaderWrapper>
  )
  return view
}

function defaultRenderProductItemList(props: StoreProductItemProps) {
  const { items } = props
  return <StyledProductItemList list={items} {...props}/>
}

function defaultRenderStoreItem(props: StoreProductItemProps) {
  const {
    renderProductItemList,
    renderHeading,
    hasSingleStore = false,
    storeName,
    items,
    state,
    currentStoreId,
    storeId,
    index,
    ...remainingProps
  } = props
  const viewType = state ? (state.isExpanded ? 'list' : 'grid') : props.viewType
  const passThroughProps = {
    storeName,
    currentStoreId,
    items,
    storeId,
  }
  const view = (
    <StoreItemWrapper index={index} viewType={viewType} >
      {(viewType === 'list' && currentStoreId !== storeId)
        && isFunction(renderHeading) && renderHeading({...passThroughProps, ...remainingProps})}
      {isFunction(renderProductItemList) &&
        renderProductItemList({
          state,
          viewType,
          hasSingleStore,
          ...passThroughProps,
          ...remainingProps
        })}
    </StoreItemWrapper>
  )
  return view
}

function defaultRenderStoreProductList(props: StoreProductListProps) {
  const { list, renderStoreItem, ...remainingProps } = props
  const hasSingleStore = isArray(list) && list.length === 1
  const view = isArray(list) && list.map((item, index) =>
    isFunction(renderStoreItem) && renderStoreItem({...item, index, hasSingleStore, ...remainingProps})
  )
  return view
}

function defaultRenderWrapper(props: StoreProductListProps) {
  const { className, children, dataQa, state, list } = props
  const viewType = state ? (state.isExpanded ? 'list' : 'grid') : props.viewType
  const hasSingleItem = isArray(list)
                          && list.length === 1
                          && isObj(list[0])
                          && isArray(list[0].items)
                          && list[0].items.length === 1
  const passThroughProps = {
    className,
    viewType,
    hasSingleItem,
    'data-qa': 'qa-store-container',
  }
  return <StoreProductListWrapper {...passThroughProps}>{children}</StoreProductListWrapper>
}

export {
  defaultRenderHeading,
  defaultRenderProductItemList,
  defaultRenderStoreItem,
  defaultRenderStoreProductList,
  defaultRenderWrapper,
}