export var ResponsiveSize;
(function (ResponsiveSize) {
  ResponsiveSize[ResponsiveSize["XSmall"] = 0] = "XSmall";
  ResponsiveSize[ResponsiveSize["Small"] = 1] = "Small";
  ResponsiveSize[ResponsiveSize["Medium"] = 2] = "Medium";
  ResponsiveSize[ResponsiveSize["Large"] = 3] = "Large";
  ResponsiveSize[ResponsiveSize["XLarge"] = 4] = "XLarge";
})(ResponsiveSize || (ResponsiveSize = {}));
const SizeLimits = {
  [ResponsiveSize.XSmall]: 600,
  [ResponsiveSize.Small]: 768,
  [ResponsiveSize.Medium]: 992,
  [ResponsiveSize.Large]: 1200,
};
function getSizeOfWidth(width) {
  const limits = Object.keys(SizeLimits);
  for (let i = 0; i < limits.length; i++) {
    const k = limits[i];
    if (width < SizeLimits[k]) {
      return Number(k);
    }
  }
  return ResponsiveSize.XLarge;
}
export class ResponsiveUIHelper {
  constructor(el, onSizeChange, onWidthChange) {
    this.el = el;
    if (typeof (ResizeObserver) !== 'undefined') {
      new ResizeObserver(() => {
        const width = this.el.clientWidth;
        onWidthChange === null || onWidthChange === void 0 ? void 0 : onWidthChange(width);
        const size = getSizeOfWidth(width);
        if (this.size !== size) {
          this.size = size;
          onSizeChange(size);
        }
      }).observe(this.el);
    }
  }
}
ResponsiveUIHelper.getSize = (width) => getSizeOfWidth(width);
