import * as React from 'react'
import { MaterialIcon } from 'atoms/MaterialIcon'
import {
  NextWrapper,
  PreviousWrapper,
  PostText,
  PreText,
  Select,
  SelectBox,
  TextWrapper,
} from './styled'
import { PaginationProps, State } from './typings'

function defaultRenderArrows(props: PaginationProps, state: State) {
  const { isFirst, isLast, nextPage, previousPage } = state
  const { isMobile } = props

  return (
    <React.Fragment>
      <PreviousWrapper>
        <MaterialIcon type="left" isDisabled={isFirst} onClick={previousPage} />
      </PreviousWrapper>
      <NextWrapper isMobile={isMobile}>
        <MaterialIcon type="right" isDisabled={isLast} onClick={nextPage} />
      </NextWrapper>
    </React.Fragment>
  )
}

function defaultRenderLimit(
  props: PaginationProps,
  state: State,
  handleSize: Event
) {
  const { size, sizes } = state
  const { isMobile, renderOption } = props

  const selectSize = (
    <Select onChange={handleSize} value={size}>
      {sizes.map(renderOption)}
    </Select>
  )

  return isMobile || sizes.length === 0 ? (
    undefined
  ) : (
    <SelectBox>
      <TextWrapper>
        <PreText>Viewing</PreText>
        {selectSize}
      </TextWrapper>
    </SelectBox>
  )
}

function defaultRenderSelector(
  props: PaginationProps,
  state: State,
  handlePage: Event
) {
  const { options, maxValue, value } = state
  const { renderOption } = props

  const selectPage = (
    <Select onChange={handlePage} value={value}>
      {options.map(renderOption)}
    </Select>
  )

  return (
    <TextWrapper>
      <PreText>Page</PreText>
      {selectPage}
      <PostText>{`of ${maxValue}`}</PostText>
    </TextWrapper>
  )
}

function defaultRenderOption(page: string | number, index?: number) {
  return (
    <option key={page} value={page}>
      {page}
    </option>
  )
}

export {
  defaultRenderArrows,
  defaultRenderLimit,
  defaultRenderOption,
  defaultRenderSelector,
}