import React, { FC } from 'react'
import { Link } from 'react-router-dom'
import { Pagination as ReactstrapPagination, PaginationItem, PaginationLink } from 'reactstrap'
import { findChunk, intToArray, splitInChunks } from './utils'


interface PaginationProps {
  maxVisiblePages?: number,
  totalPages: number,
  currentPage: number,
  onClick: (page: number) => void
}

const Pagination: FC<PaginationProps> = ({
  maxVisiblePages = 5,
  totalPages = 1,
  currentPage = 1,
  onClick
}) => {

  // << & >> buttons
  let firstButton = <></>
  if (currentPage > 1) {
    firstButton = <PaginationLink first onClick={() => { onClick(1) }} />
  }

  let lastButton = <></>
  if (currentPage < totalPages) {
    lastButton = <PaginationLink last onClick={() => { onClick(totalPages) }} />
  }

  // < & > buttons
  let prevButton = <></>
  if (currentPage > 1) {
    prevButton = <PaginationLink previous onClick={() => { onClick(currentPage - 1) }} />
  }

  let nextButton = <></>
  if (currentPage < totalPages) {
    nextButton = <PaginationLink next onClick={() => { onClick(currentPage + 1) }} />
  }

  const chunks = splitInChunks(intToArray(totalPages), maxVisiblePages)
  const chunk = findChunk(chunks, currentPage)

  // ... & ... buttons
  let prevChunk = <></>
  let nextChunk = <></>
  if (totalPages > maxVisiblePages) {
    if (chunk.index > 0) {
      prevChunk = <PaginationLink onClick={() => { onClick(chunks[chunk.index - 1][0]) }}>{'...'}</PaginationLink>
    }

    if (chunk.index < chunks.length - 1) {
      nextChunk = <PaginationLink onClick={() => { onClick(chunks[chunk.index + 1][0]) }}>{'...'}</PaginationLink>
    }
  }

  // numbered pagination buttons
  const pageButtons = []
  for (let i = 0; i < chunk.items.length; i++) {
    if (chunk.items[i] === currentPage) {
      pageButtons.push(<PaginationItem active key={i}><PaginationLink>{chunk.items[i]}</PaginationLink></PaginationItem>)
    } else {
      pageButtons.push(<PaginationItem key={i}><PaginationLink onClick={() => { onClick(chunk.items[i]) }}>{chunk.items[i]}</PaginationLink></PaginationItem>)
    }
  }

  return <nav aria-label="Pagination">
    <hr className="my-0" />
    <ReactstrapPagination listClassName="justify-content-center my-4">
      <PaginationItem>{firstButton}</PaginationItem>
      <PaginationItem>{prevButton}</PaginationItem>
      <PaginationItem>{prevChunk}</PaginationItem>
      {pageButtons}
      <PaginationItem>{nextChunk}</PaginationItem>
      <PaginationItem>{nextButton}</PaginationItem>
      <PaginationItem>{lastButton}</PaginationItem>
    </ReactstrapPagination>
  </nav>
}

interface SSRPaginationProps {
  maxVisiblePages?: number,
  totalPages: number,
  currentPage: number,
  linksPath?: string
}

const SSRPagination: FC<SSRPaginationProps> = ({
  maxVisiblePages = 5, 
  totalPages = 1,
  currentPage = 1,
  linksPath 
}) => {


  if (!linksPath) {
    return (
      <div className="pagination">
          Server Side Prerendering Pagination disabled (Missing Link Path)
      </div>
    )
  }

  // << & >> buttons
  let firstButton = <></>
  if (currentPage > 1) {
    firstButton = <PaginationLink first href={`${linksPath}/${1}`} />
  }

  let lastButton = <></>
  if (currentPage < totalPages) {
    lastButton = <PaginationLink last href={`${linksPath}/${totalPages}`} />
  }

  // < & > buttons
  let prevButton = <></>
  if (currentPage > 1) {
    prevButton = <PaginationLink previous href={`${linksPath}/${currentPage - 1}`} />
  }

  let nextButton = <></>
  if (currentPage < totalPages) {
    nextButton = <PaginationLink next href={`${linksPath}/${currentPage + 1}`} />
  }

  const chunks = splitInChunks(intToArray(totalPages), maxVisiblePages)
  const chunk = findChunk(chunks, currentPage)

  // ... & ... buttons
  let prevChunk = <></>
  let nextChunk = <></>
  if (totalPages > maxVisiblePages) {
    if (chunk.index > 0) {
      prevChunk = <PaginationLink href={`${linksPath}/${chunks[chunk.index - 1][0]}`}>{'...'}</PaginationLink>
    }

    if (chunk.index < chunks.length - 1) {
      nextChunk = <PaginationLink href={`${linksPath}/${chunks[chunk.index + 1][0]}`}>{'...'}</PaginationLink>
    }
  }

  // numbered pagination buttons
  const pageButtons = []
  for (let i = 0; i < chunk.items.length; i++) {
    if (chunk.items[i] === currentPage) {
      pageButtons.push(<PaginationItem key={i} active><PaginationLink>{chunk.items[i]}</PaginationLink></PaginationItem>)
    } else {
      pageButtons.push(<PaginationItem key={i}><PaginationLink href={`${linksPath}/${chunk.items[i]}`}>{chunk.items[i]}</PaginationLink></PaginationItem>)
    }
  }

  return <nav aria-label="Page navigation example">
    <hr className="my-0" />
    <ReactstrapPagination listClassName="justify-content-center my-4">
      <PaginationItem>{firstButton}</PaginationItem>
      <PaginationItem>{prevButton}</PaginationItem>
      <PaginationItem>{prevChunk}</PaginationItem>
      {pageButtons}
      <PaginationItem>{nextChunk}</PaginationItem>
      <PaginationItem>{nextButton}</PaginationItem>
      <PaginationItem>{lastButton}</PaginationItem>
    </ReactstrapPagination>
  </nav>
}

export {
  Pagination,
  SSRPagination
}