import { h } from '@stencil/core';
import { DomNodeSubjectObserverFactory } from '../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-id';
import { normalizePageSizeOption, sortPageSizeOptions, } from '../utils/page-size-option-utils';
import { PAGE_SIZE_ALL } from '../constants/page-size';
export const VegaPaginationPageSizeSelector = ({ pageSize, pageSizeSelectorOptions, dropdownProps, onChange, translationSlimmer, isAllActive, }) => {
  const normalized = pageSizeSelectorOptions.map(normalizePageSizeOption);
  const mergedPageSizeOptions = sortPageSizeOptions(normalized);
  const handleChange = (input) => {
    // Because input-select use single mode, so the detail is always a string type
    const selectedValue = Number(input.detail);
    onChange(selectedValue);
  };
  const selectedValue = isAllActive ? PAGE_SIZE_ALL : pageSize;
  return (h("vega-flex", { alignItems: "center", justifyContent: "center", gap: "size-8" },
    h("vega-field-label", { label: translationSlimmer.t('Show') }),
    h("div", null,
      h("vega-input-select", { size: "small", source: mergedPageSizeOptions.map((option) => ({
          id: option.value.toString(),
          displayName: option.label,
        })), value: selectedValue.toString(), placeholder: "Page Size", vegaDropdownProps: Object.assign({ matchTargetWidth: false, searchable: false }, dropdownProps), 
        /* eslint-disable-next-line react/jsx-no-bind */
        ref: (ref) => {
          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, handleChange);
        } }))));
};
