import React from 'react'
import { wording } from '@skava/ui/dist/words'
import { isFunction, toNumber } from 'exotic'
import { MaterialIcon } from '@skava/ui/dist/components/atoms/MaterialIcon'
import { PaginationProps, PaginationState } from './typings'
import {
  LeftPaginationButton,
  RightPaginationButton,
  PaginationDropDown,
  PaginationWrapper,
  PageCountText,
  CountSection,
  StyledPrimaryCount,
  PrimaryText,
  SecondaryText,
  StyledSecondaryCount,
} from './styled'

function resetPaginator(state: PaginationState) {
  let paginator = 1
  state.disableIcon('left')
  state.enableIcon('right')
  state.setCount(paginator)
}
/**
 * Handles select dropdown input change
 */
function handleDropdownChange(
  event: Event,
  item: Object,
  state: PaginationState,
  props: PaginationProps
) {
  const { onDropdownChange } = props
  // console.info('[Pagination] dropdownChange()')
  // console.dir(state)
  // This is for reseting the pagination to 1 whenever the dropdown value (i.e products per page ) changes
  resetPaginator(state)

  if (isFunction(onDropdownChange)) {
    const changeArgs = { type: 'dropdown', state, event, item }
    // console.info('[Pagination] props.onChange() ==== onDropDownChange()')
    // console.dir(changeArgs)
    onDropdownChange(changeArgs)
  }
}

/**
 * Handles pagination input change
 */
function handlePaginationInputChange(
  event: Event,
  props: PaginationProps,
  state: PaginationState
) {
  const { paginationLimit, onPaginationInputChange } = props

  let paginator = event.target.value
  paginator = paginator === '' ? '' : toNumber(paginator)

  switch (true) {
    case paginator === 1:
      resetPaginator(state)
      break
    case paginator > 1 && paginator < paginationLimit:
      state.enableIcon()
      state.setCount(paginator)
      break
    case paginator === paginationLimit:
      state.disableIcon('right')
      state.enableIcon('left')
      state.setCount(paginator)
      break
    case paginator === '':
      state.setCount(paginator)
      break
    default:
      resetPaginator(state)
      break
  }

  if (isFunction(onPaginationInputChange)) {
    const changeArgs = { type: 'input', value: state.count, state, event }
    // console.info('[Pagination] props.onChange() ==== onPaginationInputChange()')
    // console.dir(changeArgs)
    onPaginationInputChange(changeArgs)
  }
}

/**
 * Handles pagination input blur
 */
function handlePaginationInputBlur(
  event: Event,
  props: PaginationProps,
  state: PaginationState
) {
  const { onPaginationInputBlur } = props
  let value = event.target.value
  // value = (value === '' ? '' : toNumber(value))
  // console.info('[Pagination] inputBlur()')
  if (value === '') {
    resetPaginator(state)
  }
  if (isFunction(onPaginationInputBlur)) {
    const changeArgs = { type: 'input', value: state.count, state, event }
    // console.info('[Pagination] props.onBlur() ==== onPaginationInputBlur()')
    // console.dir(changeArgs)
    onPaginationInputBlur(changeArgs)
  }
}

/**
 * Handle Pagination Previous Button Click
 */
function defaultOnDecrement(props: PaginationProps, state: PaginationState) {
  state.decrementCount()
}

/**
 * Handle Pagination Next Button Click
 */
function defaultOnIncrement(props: PaginationProps, state: PaginationState) {
  state.incrementCount(props.paginationLimit)
}

/**
 * Renders right arrow
 * @param props : PaginationProps
 * @param state : PaginationState
 */
function defaultRenderRightButton(
  props: PaginationProps,
  state: PaginationState
) {
  const increment = event => props.onIncrement(props, state)
  return (
    <RightPaginationButton
      onClick={increment}
      isDisabled={state.shouldDisableRightIcon}
      aria-label={wording.triggerNext}
    >
      <MaterialIcon type="right" />
    </RightPaginationButton>
  )
}

/**
 * Renders pagination count input with labels
 * @param props : PaginationProps
 * @param state : PaginationState
 */
function defaultRenderPaginationInput(
  props: PaginationProps,
  state: PaginationState
) {
  const onChange = event => handlePaginationInputChange(event, props, state)
  const onBlur = event => handlePaginationInputBlur(event, props, state)
  return (
    <CountSection>
      <PrimaryText>{wording.pageLabel}</PrimaryText>
      <StyledPrimaryCount
        value={state.count}
        onChange={onChange}
        onBlur={onBlur}
      />
      <SecondaryText>{wording.ofLabel}</SecondaryText>
      <StyledSecondaryCount>{props.paginationLimit}</StyledSecondaryCount>
    </CountSection>
  )
}

/**
 * Renders left arrow
 * @param props : PaginationProps
 * @param state : PaginationState
 */
function defaultRenderLeftButton(
  props: PaginationProps,
  state: PaginationState
) {
  const decrement = event => props.onDecrement(props, state)
  return (
    <LeftPaginationButton
      onClick={decrement}
      isDisabled={state.shouldDisableLeftIcon}
      aria-label={wording.triggerPrevious}
    >
      <MaterialIcon type="left" />
    </LeftPaginationButton>
  )
}

/**
 * Renders the standalone pagination wrapper
 * @param props : PaginationProps
 * @param state : PaginationState
 */
function defaultRenderPaginationWithArrows(
  props: PaginationProps,
  state: PaginationState
) {
  const { renderLeftButton, renderPaginationInput, renderRightButton } = props
  const leftArrowView = renderLeftButton(props, state)
  const rightArrowView = renderRightButton(props, state)
  const paginationInputView = renderPaginationInput(props, state)
  return (
    <React.Fragment>
      {leftArrowView}
      {paginationInputView}
      {rightArrowView}
    </React.Fragment>
  )
}

/**
 * renders select dropdown component
 */
function defaultRenderDropDown(props: PaginationProps, state: PaginationState) {
  const onChange = (event, item) =>
    handleDropdownChange(event, item, state, props)
  const paginationProps = {
    // state: props.state,
    // @todo !!! this needs to have these in props
    // @todo person who made pagination preset
    // ^ need to test the presets
    // the same as someone using it functionally in the story
    /* isDisabled: props.isDisabled, */

    onChange: onChange,
    // onClickOutside: props.onClickOutside,

    options: props.list,
  }

  return <PaginationDropDown {...paginationProps} />
}

/**
 * renders pagination wrapper
 */
function defaultRenderWrapper(props: PaginationProps, state: PaginationState) {
  console.log('[Pagination] defaultRenderWrapper')
  const { children, className } = props
  return <PaginationWrapper className={className}>{children}</PaginationWrapper>
}

export {
  defaultRenderWrapper,
  defaultRenderDropDown,
  defaultRenderPaginationWithArrows,
  defaultRenderLeftButton,
  defaultRenderPaginationInput,
  defaultRenderRightButton,
  defaultOnDecrement,
  defaultOnIncrement,
}