import React from "react"
import { connectPagination } from "react-instantsearch-dom"
import * as styles from "./styles.module.scss"
import * as classNames from "classnames"

interface IProps {
  className?: string
  currentRefinement: any
  nbPages: number
  refine: () => void
  createURL: any
}

const Pagination = ({
  className,
  currentRefinement,
  nbPages,
  refine,
  createURL,
}: IProps) => {
  return (
    <React.Fragment>
      {nbPages > 1 && (
        <ul
          className={classNames({
            [styles.list]: true,
            [className]: !!className,
          })}
        >
          {new Array(nbPages).fill(null).map((_, index) => {
            const page = index + 1

            return (
              <li key={index}>
                <a
                  className={classNames({
                    [styles.link]: true,
                    [styles.active]: currentRefinement === page,
                  })}
                  href={createURL(page)}
                  onClick={event => {
                    event.preventDefault()
                    refine(page)
                  }}
                >
                  <span className={styles.text}>{page}</span>
                </a>
              </li>
            )
          })}
        </ul>
      )}
    </React.Fragment>
  )
}

const CustomPagination = connectPagination(Pagination)

export default CustomPagination
