import React from 'react'
import { List } from 'molecules/List'
import { SelectionState } from 'src/state/SelectionState'
import { SwatchWrapper, StyledSwatchesButton } from './styled'
import { SwatchListProps, SwatchItemProps } from './typings'

function defaultRenderSwatchItem(props: SwatchItemProps, index?: number) {
  const { label, ...remainingProps } = props
  return <StyledSwatchesButton text={label} {...remainingProps} />
}

function defaultRenderSwatchList(props: SwatchListProps, state?: SelectionState) {
  const { list, renderItem } = props

  const view = list.map(item => renderItem(item, state, props))
  return view
}

function defaultRenderListWrapper(props: SwatchListProps) {
  const { children, className } = props
  return <SwatchWrapper className={className}>{children}</SwatchWrapper>
}

export {
  defaultRenderListWrapper,
  defaultRenderSwatchList,
  defaultRenderSwatchItem,
}