import React from 'react'
import { SelectDropDown } from 'molecules/SelectDropDown'
import { QuantityWrapper, StyledTitle, StyledIncrementer } from './styled'
import { QuantityProps } from './typings'

function defaultRenderIncrementer(props: QuantityProps) {
  const { defaultValue, ...remainingProps } = props
  return <StyledIncrementer defaultValue={defaultValue} {...remainingProps} />
}
function defaultRenderDropdown(props: QuantityProps) {
  const { list, onChange, shouldBeAbsoluteDropDown } = props
  return (
    <SelectDropDown
      list={list}
      onChange={onChange}
      shouldBeAbsolute={shouldBeAbsoluteDropDown}
    />
  )
}

function defaultRenderTitle(props: QuantityProps) {
  const { title, content, text } = props
  return <StyledTitle breedType="h3" content={title || content || text} />
}

function defaultRenderContainer(props: QuantityProps) {
  const {
    type,
    renderTitle,
    renderDropdown,
    renderIncrementer,
    isHeader,
    ...remainingProps
  } = props
  const title = isHeader ? renderTitle(remainingProps) : ''
  const QuantityContainer =
    type === 'dropdown'
      ? renderDropdown(remainingProps)
      : renderIncrementer(remainingProps)
  return (
    <React.Fragment>
      {title}
      {QuantityContainer}
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: QuantityProps) {
  const { className, children } = props
  return <QuantityWrapper className={className}>{children}</QuantityWrapper>
}

export {
  defaultRenderIncrementer,
  defaultRenderDropdown,
  defaultRenderTitle,
  defaultRenderContainer,
  defaultRenderWrapper,
}
export default defaultRenderWrapper