/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import React from 'react'
import { bool, func, number, string } from 'prop-types'
import classNames from 'classnames'
import DemioIcon from '../Icon/Icon'
import './DemioPagination.less'

function DemioPagination({
  disabled,
  page,
  totalItems,
  pageSize = 10,
  onChange,
  className,
  hideOnSinglePage = true,
}) {
  const totalPages = Math.ceil(totalItems / pageSize)
  if (hideOnSinglePage && totalPages <= 1) return null

  const previousPageNumber = page - 1
  const nextPageNumber = page + 1
  const isFirstPage = page === 1
  const isLastPage = page === totalPages
  const isPreviousValid = previousPageNumber < 1
  const isNextValid = nextPageNumber > totalPages

  const handleButtonClick = (pageNumber) => () => {
    onChange(pageNumber)
  }

  const getPagesToShow = () => {
    // Potentially a better way to handle this. Feel free to improve the logic
    const pagesToShow = [previousPageNumber, page, nextPageNumber]

    if (isFirstPage) {
      pagesToShow.shift()

      if (totalPages > 2) {
        pagesToShow.push(nextPageNumber + 1)
      }
    }

    if (isLastPage) {
      pagesToShow.pop()

      if (totalPages > 2) {
        pagesToShow.unshift(previousPageNumber - 1)
      }
    }

    return pagesToShow
  }

  const getPageButtons = () => {
    const pagesToShow = getPagesToShow()

    return pagesToShow.map((pageNumber) => ({
      content: pageNumber,
      onClick: handleButtonClick(pageNumber),
      disabled: false,
    }))
  }

  const getButtons = () => [
    {
      content: <DemioIcon type="LeftArrowDouble" width={16} fill="#5D676B" />,
      onClick: handleButtonClick(1),
      disabled: isFirstPage,
    },
    {
      content: <DemioIcon type="LeftArrow" width={16} fill="#5D676B" />,
      onClick: handleButtonClick(previousPageNumber),
      disabled: isPreviousValid,
    },
    ...getPageButtons(),
    {
      content: <DemioIcon type="RightArrow" width={16} fill="#5D676B" />,
      onClick: handleButtonClick(nextPageNumber),
      disabled: isNextValid,
    },
    {
      content: <DemioIcon type="RightArrowDouble" width={16} fill="#5D676B" />,
      onClick: handleButtonClick(totalPages),
      disabled: isLastPage,
    },
  ]

  const renderButton = ({ content, onClick, disabled: isButtonDisabled }, index) => {
    const isNaN = content !== content
    if (isNaN || !content) return null

    return (
      <li
        className={classNames({
          'demio-pagination-button': true,
          '--disabled': isButtonDisabled || disabled,
          '--current': page === content,
          '--small-number': content > 999,
        })}
        onClick={isButtonDisabled ? () => null : onClick}
        key={index}
        tabIndex={0}>
        {content}
      </li>
    )
  }

  return (
    // classNames wasn't working with the custom className so I settled for this for now
    <ul
      className={classNames('demio-pagination-container', {
        [className]: !!className,
      })}>
      {getButtons().map(renderButton)}
    </ul>
  )
}

DemioPagination.propTypes = {
  page: number,
  totalItems: number,
  onChange: func,
  pageSize: number,
  className: string,
  hideOnSinglePage: bool,
  disabled: bool,
}

DemioPagination.defaultProps = {
  page: 1,
  totalItems: 0,
  onChange: () => null,
  pageSize: 10,
  className: '',
  hideOnSinglePage: true,
  disabled: false,
}

export default DemioPagination