import * as React from 'react'
import { ArrowIcon } from 'atoms/Icons/ArrowIcon/'
import {
  NextButton,
  PostText,
  PreText,
  PreviousButton,
  Select,
  SelectBox,
  TextWrapper
} from './styled'
import { PaginationProps, State } from './typings'

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

  return (
    <React.Fragment>
      <PreviousButton isDisabled={isFirst} onClick={previousPage}>
        <ArrowIcon left="true" fill={isFirst ? offColor : onColor} />
      </PreviousButton>
      <NextButton
        isDisabled={isLast}
        isMobile={isMobile}
        onClick={nextPage}
      >
        <ArrowIcon right="true" fill={isLast ? offColor : onColor} />
      </NextButton>
    </React.Fragment>
  )
}

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

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

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

function defaultRenderSelector(props: PaginationProps, state: State, handlePage) {
  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,
}