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: 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,
}