import React, { ReactNode } from 'react'
import { ToggleItemProps } from '../ToggleItem/typings'
import { ToggleItem } from '../ToggleItem'
import { ToggleListProps, ToggleState } from './typings'
import { ToggleListWrapper, Header, ToggleContentWrapper } from './styled'

export function defaultRenderItem(
  item: ToggleItemProps,
  state: ToggleState,
  toggleListProps: ToggleListProps
) {
  const { breedType, ...remainingListProps } = toggleListProps
  const isRadio = Boolean(breedType === 'radio')
  const isCheckBox = Boolean(breedType === 'checkbox')
  /**
   * @todo need to omit the values when passing the item props
   */
  return (
    <ToggleItem
      isRadio={isRadio}
      isCheckBox={isCheckBox}
      // state={item}
      {...item}
      {...remainingListProps}
    />
  )
}

/**
 * TOGGLE LIST COMPONENT RENDER PROPS
 */
// export function defaultRenderList() {}

export function defaultRenderWrapper(props: ToggleListProps) {
  const { className, children, dataQa } = props
  const passThroughProps = {
    className,
    'data-qa': dataQa,
  }
  return <ToggleListWrapper {...passThroughProps}>{children}</ToggleListWrapper>
}

export function defaultRenderHeader(props: ToggleListProps) {
  const { title } = props
  return title && <Header>{title}</Header>
}

export function defaultRenderContentWrapper(toggleList: ReactNode) {
  return <ToggleContentWrapper>{toggleList}</ToggleContentWrapper>
}