"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _reactMeasure = _interopRequireDefault(require("react-measure"));
var _constants = require("../../constants");
var _jsxRuntime = require("react/jsx-runtime");
// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

/**
 * `Grid` component is used to layout and align content based on 12-column system.
 * @since 0.0.48
 */
class Grid extends _react.Component {
  constructor() {
    super(...arguments);
    (0, _defineProperty2.default)(this, "state", {
      xs: this.props.xs
    });
    (0, _defineProperty2.default)(this, "handleResize", _ref => {
      let {
        bounds
      } = _ref;
      const {
        width
      } = bounds;
      let {
        maxColumnsNumber
      } = this.props;
      if (typeof maxColumnsNumber === 'function') {
        maxColumnsNumber = maxColumnsNumber({
          width
        });
      }
      const xs = Math.max(Math.floor((width + this.getGapSize()) / (this.props.minColumnWidth + this.getGapSize())), 1);
      this.setState({
        xs: Math.min(xs, maxColumnsNumber)
      });
      if (this.props.onColumnsChange) {
        this.props.onColumnsChange(xs);
      }
    });
  }
  getGapSize() {
    switch (this.props.gap) {
      case 'xs':
        return 8;
      case 'sm':
        return 12;
      case 'md':
        return 16;
      case 'lg':
        return 24;
      case 'xl':
        return 32;
      default:
        return 0;
    }
  }
  render() {
    const {
      baseClassName,
      className,
      minColumnWidth,
      onColumnsChange,
      maxColumnsNumber,
      xs,
      sm,
      md,
      lg,
      xl,
      gap,
      children,
      ...props
    } = this.props;
    const computedClassName = (0, _classnames.default)(baseClassName, {
      [`${baseClassName}--xs-${this.state.xs}`]: this.state.xs,
      [`${baseClassName}--sm-${sm}`]: sm,
      [`${baseClassName}--md-${md}`]: md,
      [`${baseClassName}--lg-${lg}`]: lg,
      [`${baseClassName}--xl-${xl}`]: xl,
      [`${baseClassName}--gap-xs`]: gap === 'xs',
      [`${baseClassName}--gap-sm`]: gap === 'sm',
      [`${baseClassName}--gap-md`]: gap === 'md',
      [`${baseClassName}--gap-lg`]: gap === 'lg',
      [`${baseClassName}--gap-xl`]: gap === 'xl'
    }, className);
    const result = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: computedClassName,
      ...props,
      children: minColumnWidth && !this.state.xs ? null : children
    });
    if (minColumnWidth) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
        bounds: true,
        onResize: this.handleResize,
        children: _ref2 => {
          let {
            measureRef
          } = _ref2;
          return /*#__PURE__*/(0, _react.cloneElement)(result, {
            ref: measureRef
          });
        }
      });
    }
    return result;
  }
}
(0, _defineProperty2.default)(Grid, "defaultProps", {
  children: null,
  className: null,
  baseClassName: `${_constants.CLS_PREFIX}grid`,
  minColumnWidth: null,
  maxColumnsNumber: 6,
  xs: null,
  sm: null,
  md: null,
  lg: null,
  xl: null,
  gap: null,
  onColumnsChange: null
});
var _default = exports.default = Grid;