import React from 'react'
import { isArray } from 'exotic'
import { RectanglePlaceholder } from '@skava/ui/dist/components/atoms/Placeholder'
import { ProductItem } from '../ProductItem'
import {
  StoreDetails,
  StyledSquarePlaceholder,
  ProductItemWrapper,
  ProductListWrapper,
  StoreWrapper,
} from './styled'
import { ProductListProps } from './typings'

function defaultRenderStoreName() {
  return (
    <React.Fragment>
      <StyledSquarePlaceholder width={24} height={24} />
      <RectanglePlaceholder width={100} height={24} />
    </React.Fragment>
  )
}

function defaultRenderProductItem(props: ProductListProps) {
  return <ProductItem item={props.item} />
}

function defaultRenderProductList(props: ProductListProps) {
  const { renderStoreName, renderProductItem, item, ...remainingProps } = props
  const { productItem } = item
  return (
    <ProductItemWrapper>
      <StoreDetails>
        {renderStoreName({ item, ...remainingProps })}
      </StoreDetails>
      <ProductListWrapper>
        {isArray(productItem) &&
          productItem.map(productInformation =>
            renderProductItem({ item: productInformation, ...remainingProps })
          )}
      </ProductListWrapper>
    </ProductItemWrapper>
  )
}

function defaultRenderStoreProductList(props: ProductListProps) {
  const { orderList, ...remainingProps } = props
  const view =
    isArray(orderList) &&
    orderList.map(item => defaultRenderProductList({ item, ...remainingProps }))
  return <StoreWrapper>{view}</StoreWrapper>
}

export {
  defaultRenderStoreName,
  defaultRenderProductItem,
  defaultRenderProductList,
  defaultRenderStoreProductList,
}