import React from 'react'
import { isArray } from 'exotic'
import { Row } from 'atoms/Row'
import { TabListProps, ProductItem, Items } from './typings'
import {
  ListWrapper,
  ItemList,
  ListItem,
  StyledButton,
  NavSeparatorIcon,
} from './styled'

function defaultRenderList(props: ProductItem) {
  const { index, value, handleForce } = props
  const { label, item, onClick } = value
  const handleClick = event => {
    onClick(event)
    handleForce()
  }
  return (
    <React.Fragment>
      <StyledButton tabIndex={index} text={label} onClick={handleClick} />
      <NavSeparatorIcon />
    </React.Fragment>
  )
}

function defaultRenderContainer(props: Items) {
  const list = props
  const selectedItem = list.find(data => data.isSelected)
  console.log(selectedItem)
}

function defaultRenderWrapper(props: TabListProps) {
  const {
    className,
    dataQa,
    list,
    renderList,
    renderContainer,
    handleForce,
  } = props
  const view =
    isArray(list) &&
    list.map((value: any, index: number) =>
      renderList({ value, index, handleForce })
    )
  const listView = renderContainer(list)
  return (
    <ListWrapper className={className} data-qa={dataQa}>
      <ItemList>{view}</ItemList>
      <ItemList>{listView}</ItemList>
    </ListWrapper>
  )
}

export { defaultRenderList, defaultRenderContainer, defaultRenderWrapper }