import React from 'react'
import { MediaCarousel } from 'presets/Studio/MediaCarousel'
import { categories } from './../fixture'
import { CategoryProps } from './typings'
import {
  Title,
  Wrapper,
} from './styled'
import { Pagination } from './../Pagination'

function defaultRenderPagination(props: CategoryProps) {
  return <Pagination />
}

function defaultRenderCategory(props: CategoryProps) {
  const listView = categories.map((category, index) => (
    <React.Fragment>
      <Title>{category.name}</Title>
      <MediaCarousel
        key={index}
        list={category.models}
      />
    </React.Fragment>
  ))

  return listView
}

function defaultRenderBox(props: CategoryProps) {
  const { renderPagination, renderCategory, ...remainingProps } = props
  const view = (
    <React.Fragment>
      {renderCategory(remainingProps)}
      {renderPagination(remainingProps)}
    </React.Fragment>
  )
  return view
}
function defaultRenderWrapper(props: CategoryProps) {
  const { children, className } = props
  return <Wrapper className={className}>{children}</Wrapper>
}

export {
  defaultRenderPagination,
  defaultRenderCategory,
  defaultRenderBox,
  defaultRenderWrapper,
}