import * as React from 'react';

import { useTranslations } from '@shoptet/ui-core-web';

import type { AnchorProps } from '../../../Anchor/Anchor';
import { Button } from '../../../Button/Button';
import { PageAnchor } from '../PageAnchor/PageAnchor';

import { dictionary } from './dictionary';

export interface PagesProps {
  /**
   * Total number of pages.
   *
   * @default undefined
   */
  pagesTotal: number;
  /**
   * Current page number.
   *
   * @default undefined
   */
  pageCurrent: number;
  /**
   * Url of the previous page. If null or undefined, the button is not displayed.
   *
   * @default undefined
   */
  previousPageUrl?: string | null;
  /**
   * Url of the next page. If null or undefined, the button is not displayed.
   *
   * @default undefined
   */
  nextPageUrl?: string | null;
  /**
   * Getter for url of the page.
   *
   * @default undefined
   */
  getLinkProps: (page: number | string) => Pick<AnchorProps, 'href' | 'onClick' | 'target'>;
}

export const Pages: React.FC<PagesProps> = ({
  pagesTotal,
  pageCurrent,
  previousPageUrl,
  nextPageUrl,
  getLinkProps,
  ...rest
}) => {
  const translations = useTranslations(dictionary);

  return (
    <div className='pagination__pages' {...rest}>
      {previousPageUrl && (
        <PageAnchor icon='shp-back' aria-label={translations.previousPage} {...getLinkProps(previousPageUrl)} />
      )}
      {pageCurrent != 1 && <PageAnchor page={1} {...getLinkProps(1)} />}
      {pageCurrent > 3 && '...'}
      {pageCurrent - 2 > 1 && <PageAnchor page={pageCurrent - 2} {...getLinkProps(pageCurrent - 2)} />}
      {pageCurrent - 1 > 1 && <PageAnchor page={pageCurrent - 1} {...getLinkProps(pageCurrent - 1)} />}
      {pagesTotal > 1 && <Button>{pageCurrent}</Button>}
      {pageCurrent + 1 < pagesTotal && <PageAnchor page={pageCurrent + 1} {...getLinkProps(pageCurrent + 1)} />}
      {pageCurrent + 2 < pagesTotal && <PageAnchor page={pageCurrent + 2} {...getLinkProps(pageCurrent + 2)} />}
      {pagesTotal > pageCurrent + 2 && ' ... '}
      {pagesTotal != pageCurrent && <PageAnchor page={pagesTotal} {...getLinkProps(pagesTotal)} />}
      {nextPageUrl && <PageAnchor icon='shp-next' aria-label={translations.nextPage} {...getLinkProps(nextPageUrl)} />}
    </div>
  );
};