import { h } from '@stencil/core';
import { convertToNumber, normalizeNumberByRanger } from '../../../utils/number';
import { DomNodeSubjectObserverFactory } from '../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
import { VegaBlur, VegaFormSubmit } from '../../../helpers/event-manager/event-id/vega-event-id';
export const VegaPaginationGoTo = ({ onChange, pageCount, translationSlimmer, }) => {
  let inputRef;
  const handleChange = () => {
    if (inputRef.value) {
      const goToPage = normalizeNumberByRanger(convertToNumber(inputRef.value, 1), 1, pageCount);
      onChange(goToPage);
      inputRef.value = '';
    }
  };
  const stopChangePropagation = (e) => {
    e.stopPropagation();
  };
  return (h("vega-flex", { alignItems: "center", justifyContent: "center", gap: "size-8" },
    h("vega-field-label", { label: translationSlimmer.t('Go To') }),
    h("vega-form", { 
      /* eslint-disable-next-line react/jsx-no-bind */
      ref: (ref) => {
        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFormSubmit, handleChange);
      } },
      h("vega-input", { "data-vega-form": "paginationGoTo", type: "number", size: "small", showClearIcon: false, style: { width: '60px' }, maskConfig: {
          type: 'number',
          options: {
            allowNegative: false,
            precision: 0,
          },
        }, 
        /* eslint-disable-next-line react/jsx-no-bind */
        onVegaChange: stopChangePropagation, 
        /* eslint-disable-next-line react/jsx-no-bind */
        onChange: stopChangePropagation, 
        /* eslint-disable-next-line react/jsx-no-bind */
        ref: (ref) => {
          inputRef = ref;
          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaBlur, handleChange);
        } }))));
};
