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 } = props
  return <StyledIncrementer defaultValue={defaultValue} {...props} />
}
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