import { memo } from 'react'

import './EmployeesPagination.scss'

export type PaginationItem = number | 'prev-ellipsis' | 'next-ellipsis'

type EmployeesPaginationProps = {
  currentPage: number
  loading: boolean
  items: PaginationItem[]
  hasPrevPage: boolean
  hasNextPage: boolean
  onPrev: () => void
  onNext: () => void
  onJumpPrev: () => void
  onJumpNext: () => void
  onPageChange: (page: number) => void
}

function ChevronLeftIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path
        d="M15 18L9 12L15 6"
        fill="none"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
      />
    </svg>
  )
}

function ChevronRightIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path
        d="M9 6L15 12L9 18"
        fill="none"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
      />
    </svg>
  )
}

function DoubleChevronLeftIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path
        d="M11 17L6 12L11 7"
        fill="none"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
      />
      <path
        d="M18 17L13 12L18 7"
        fill="none"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
      />
    </svg>
  )
}

function DoubleChevronRightIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path
        d="M13 7L18 12L13 17"
        fill="none"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
      />
      <path
        d="M6 7L11 12L6 17"
        fill="none"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
      />
    </svg>
  )
}

export const EmployeesPagination = memo(function EmployeesPagination({
  currentPage,
  loading,
  items,
  hasPrevPage,
  hasNextPage,
  onPrev,
  onNext,
  onJumpPrev,
  onJumpNext,
  onPageChange,
}: EmployeesPaginationProps) {
  return (
    <div className="employees-pagination">
      <div className="employees-pagination__controls">
        <button
          className="employees-pagination__button"
          type="button"
          disabled={!hasPrevPage || loading}
          onClick={onPrev}
          aria-label="Предыдущая страница"
        >
          <ChevronLeftIcon />
        </button>

        {items.map((item, index) => {
          if (item === 'prev-ellipsis' || item === 'next-ellipsis') {
            const isPrev = item === 'prev-ellipsis'

            return (
              <button
                className="employees-pagination__button employees-pagination__ellipsis-button"
                type="button"
                key={`${item}-${index}`}
                disabled={loading}
                onClick={isPrev ? onJumpPrev : onJumpNext}
                aria-label={
                  isPrev
                    ? 'Перейти на 5 страниц назад'
                    : 'Перейти на 5 страниц вперед'
                }
              >
                <span className="employees-pagination__ellipsis-dots">
                  ...
                </span>

                <span className="employees-pagination__ellipsis-arrow">
                  {isPrev ? (
                    <DoubleChevronLeftIcon />
                  ) : (
                    <DoubleChevronRightIcon />
                  )}
                </span>
              </button>
            )
          }

          const pageIndex = item - 1
          const isActive = pageIndex === currentPage

          return (
            <button
              className={`employees-pagination__button ${
                isActive ? 'is-active' : ''
              }`}
              type="button"
              key={item}
              disabled={loading || isActive}
              onClick={() => onPageChange(pageIndex)}
            >
              {item}
            </button>
          )
        })}

        <button
          className="employees-pagination__button"
          type="button"
          disabled={!hasNextPage || loading}
          onClick={onNext}
          aria-label="Следующая страница"
        >
          <ChevronRightIcon />
        </button>
      </div>
    </div>
  )
})
