import React from 'react'
import { isFunction } from 'exotic'
import { Empty } from '@skava/ui/dist/components/atoms/Empty'
import { Toggle } from '@skava/ui/dist/components/molecules/Toggle'
import { GalleryViewProps } from './typings'
import {
  SalePrice,
  RegularPrice,
  Favorite,
  StyledLink,
  StyledProductPrice,
  StyledProductName,
  StyledProductBrandName,
  StyledProductImage,
  DetailsContainer,
  StyledWrapper,
} from './styled'

const productAction = props => {
  const { children, identifier } = props
  const imageLink = `/product/${identifier}`
  return <StyledLink to={imageLink}>{children}</StyledLink>
}

function defaultRenderPrice(props: GalleryViewProps) {
  const { salePrice, regPrice } = props.price
  return (
    <StyledProductPrice>
      <SalePrice>{salePrice}</SalePrice>
      <RegularPrice>{regPrice}</RegularPrice>
    </StyledProductPrice>
  )
}

function defaultRenderBrandName(props: GalleryViewProps) {
  const { brandName } = props
  return <StyledProductBrandName>{brandName}</StyledProductBrandName>
}

function defaultRenderName(props: GalleryViewProps) {
  const { name } = props
  const attributes = {
    children: <StyledProductName>{name}</StyledProductName>,
    ...props,
  }
  return productAction(attributes)
}

function defaultRenderImage(props: GalleryViewProps) {
  const attributes = {
    children: <StyledProductImage src={props.image} alt={props.identifier} />,
    ...props,
  }
  return productAction(attributes)
}

function defaultRenderFavorite(props: GalleryViewProps) {
  const { isFavoriteActive, onToggle } = props
  const attributes = {
    iconType: 'heart',
    onToggle,
  }
  const favoriteView = isFavoriteActive ? (
    <Favorite>
      <Toggle {...attributes} />
    </Favorite>
  ) : (
      <Empty />
    )
  return favoriteView
}

function defaultRenderItem(props: GalleryViewProps) {
  const { renderName, renderBrandName, renderPrice, renderImage, renderFavorite, ...remainingProps } = props

  const nameView = isFunction(renderName) && renderName(remainingProps)
  const brandNameView = isFunction(renderBrandName) && renderBrandName(remainingProps)
  const priceView = isFunction(renderPrice) && renderPrice(remainingProps)
  const imageView = isFunction(renderImage) && renderImage(remainingProps)
  const favoriteView = isFunction(renderFavorite) && renderFavorite(remainingProps)

  return (
    <React.Fragment>
      {imageView}
      {favoriteView}
      <DetailsContainer>
        {brandNameView}
        {nameView}
        {priceView}
      </DetailsContainer>
    </React.Fragment>
  )
}

function defaultRenderBox(props: GalleryViewProps) {
  const { renderItem, ...remainingProps } = props
  return isFunction(renderItem) && renderItem(remainingProps)
}

function defaultRenderWrapper(props: GalleryViewProps) {
  const { className, children, dataQa } = props
  return (
    <StyledWrapper className={className} data-qa={dataQa}>
      {children}
    </StyledWrapper>
  )
}

export {
  defaultRenderName,
  defaultRenderBrandName,
  defaultRenderPrice,
  defaultRenderImage,
  defaultRenderFavorite,
  defaultRenderItem,
  defaultRenderBox,
  defaultRenderWrapper
}