import * as React from 'react';

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

import { SingleSelectField } from '../../../Fields/SingleSelectField/SingleSelectField';

import { dictionary } from './dictionary';

export type ItemsPerPage = 25 | 50 | 75 | 100 | 250;

export interface LimitsProps {
  /**
   * Number of rows to display in one page.
   *
   * @default 25
   */
  itemsPerPage: ItemsPerPage;
  /**
   * Number of rows to display in one page.
   *
   * @default 'Items per page'
   */
  label?: string;
  /**
   * Function handling the change event.
   *
   * @default undefined
   */
  onChange: (value: number) => void;
}

const limitOptions = [
  { value: '25', label: '25' },
  { value: '50', label: '50' },
  { value: '75', label: '75' },
  { value: '100', label: '100' },
];

export const Limits: React.FC<LimitsProps> = ({ itemsPerPage = 25, label, onChange, ...rest }) => {
  const translations = useTranslations(dictionary);

  return (
    <div className='pagination__limits' {...rest}>
      <SingleSelectField
        name='itemsPerPage'
        value={itemsPerPage.toString()}
        onChange={value => onChange(Number(value))}
        label={label ?? translations.itemsPerPage}
        options={limitOptions}
        width='xs'
        getOptionValue={option => option.value}
        getOptionLabel={option => option.label}
      />
    </div>
  );
};