import * as React from 'react';

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

import { Anchor, type AnchorProps, type ButtonProp } from '../../../Anchor/Anchor';
import { Button } from '../../../Button/Button';
import { NumberField } from '../../../Fields/NumberField/NumberField';
import { Icon } from '../../../Icon/Icon';

import { dictionary } from './dictionary';

export interface JumpProps {
  /**
   * Text that appears next to the input.
   *
   * @default 'Show page'
   */
  label: string;
  /**
   * Maximum number to jump to.
   *
   * @default undefined
   */
  totalPages: number;
  /**
   * Function handling the jump.
   *
   * @default undefined
   */
  getLinkProps: (page: number) => Pick<AnchorProps, 'href' | 'onClick' | 'target'>;
}

const button: ButtonProp = {
  variant: 'action',
};

export const Jump: React.FC<JumpProps> = ({ label, totalPages, getLinkProps, ...rest }) => {
  const [error, setError] = React.useState(false);
  const [page, setPage] = React.useState<number | null>(null);

  const translations = useTranslations(dictionary);

  const pageNumber = Number(page);
  const isPageValid = Number.isInteger(pageNumber) && pageNumber > 0 && pageNumber <= totalPages;

  React.useEffect(() => {
    if (page === null) {
      setError(false);
    } else {
      setError(!isPageValid);
    }
  }, [isPageValid, page]);

  return (
    <div className='pagination__jump pagination__jumpForm' {...rest}>
      <NumberField label={label ?? translations.showPage} error={!!error} onChange={setPage} width='xs' />
      {isPageValid ? (
        <Anchor button={button} aria-label={translations.goToPage} {...getLinkProps(pageNumber)}>
          <Icon icon='shp-next' size='sm' />
        </Anchor>
      ) : (
        <Button variant='action' size='sm' disabled={page !== null}>
          <Icon icon='shp-next' size='sm' />
        </Button>
      )}
    </div>
  );
};