import React from 'react'
import { MaterialIcon } from '@skava/ui/dist/components/atoms/MaterialIcon'
import { TabList } from '@skava/ui/dist/components/molecules/TabList'
import { MediaCarousel } from '@skava/ui/dist/components/organisms/MediaCarousel'
import { TabbedProductTileListProps } from './typings'
import { ProductTile } from 'presets/Studio/ProductTile'
import { LinkHeader, StyledLink, Wrapper } from './styled'

function defaultRenderItem(props: TabbedProductTileListProps) {
  return <ProductTile {...props} />
}

function defaultRenderContainer(props: Items) {
  const list = props
  const selectedItem = list.find(data => data.isSelected)
  const view = defaultRenderItem
  const { item } = selectedItem
  const attrs = {
    hasNavigations: true,
    type: 'carousel',
    hasBullets: false,
    renderItem: view,
  }
  return <MediaCarousel list={item} {...attrs} />
}

function defaultRenderWrapper(props: TabbedProductTileListProps) {
  const {
    className,
    dataQa,
    viewAllLabel,
    viewAllCTA,
    ...remainingProps
  } = props
  return (
    <Wrapper className={className} data-qa={dataQa}>
      <LinkHeader>
        <StyledLink text={viewAllLabel} to={viewAllCTA} />
        <MaterialIcon type="right" />
      </LinkHeader>
      <TabList {...remainingProps} />
    </Wrapper>
  )
}
export { defaultRenderContainer, defaultRenderWrapper }