"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _reactMeasure = _interopRequireDefault(require("react-measure"));

var _constants = require("../../constants");

// Copyright 1999-2020. 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(...args) {
    super(...args);
    (0, _defineProperty2.default)(this, "state", {
      xs: this.props.xs
    });
    (0, _defineProperty2.default)(this, "handleResize", ({
      bounds: {
        width
      }
    }) => {
      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, {
      ["".concat(baseClassName, "--xs-").concat(this.state.xs)]: this.state.xs,
      ["".concat(baseClassName, "--sm-").concat(sm)]: sm,
      ["".concat(baseClassName, "--md-").concat(md)]: md,
      ["".concat(baseClassName, "--lg-").concat(lg)]: lg,
      ["".concat(baseClassName, "--xl-").concat(xl)]: xl,
      ["".concat(baseClassName, "--gap-xs")]: gap === 'xs',
      ["".concat(baseClassName, "--gap-sm")]: gap === 'sm',
      ["".concat(baseClassName, "--gap-md")]: gap === 'md',
      ["".concat(baseClassName, "--gap-lg")]: gap === 'lg',
      ["".concat(baseClassName, "--gap-xl")]: gap === 'xl'
    }, className);

    const result = /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
      className: computedClassName
    }, props), minColumnWidth > 0 && !this.state.xs ? null : children);

    if (minColumnWidth > 0) {
      return /*#__PURE__*/_react.default.createElement(_reactMeasure.default, {
        bounds: true,
        onResize: this.handleResize
      }, ({
        measureRef
      }) => /*#__PURE__*/(0, _react.cloneElement)(result, {
        ref: measureRef
      }));
    }

    return result;
  }

}

Grid.propTypes = {
  /**
   * Content of the `Grid`.
   * @since 0.0.48
   */
  children: _propTypes.default.node,

  /**
   * @ignore
   */
  className: _propTypes.default.string,

  /**
   * @ignore
   */
  baseClassName: _propTypes.default.string,

  /**
   * Minimal column width
   * @since 0.0.50
   */
  minColumnWidth: _propTypes.default.number,

  /**
   * Maximum columns number
   * @since 0.0.53
   */
  maxColumnsNumber: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.func]),

  /**
   * Number of columns for `xs` breakpoint
   * @since 0.0.53
   */
  xs: _propTypes.default.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 'auto']),

  /**
   * Number of columns for `sm` breakpoint
   * @since 0.0.48
   */
  sm: _propTypes.default.oneOf([1, 2, 3, 4, 5, 6, 'auto']),

  /**
   * Number of columns for `md` breakpoint
   * @since 0.0.48
   */
  md: _propTypes.default.oneOf([1, 2, 3, 4, 5, 6, 'auto']),

  /**
   * Number of columns for `lg` breakpoint
   * @since 0.0.48
   */
  lg: _propTypes.default.oneOf([1, 2, 3, 4, 5, 6, 'auto']),

  /**
   * Number of columns for `xl` breakpoint
   * @since 0.0.48
   */
  xl: _propTypes.default.oneOf([1, 2, 3, 4, 5, 6, 'auto']),

  /**
   * Specifying the gutters between grid items
   * @since 0.0.53
   */
  gap: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),

  /**
   * Columns number change notifier
   * @since 0.0.50
   */
  onColumnsChange: _propTypes.default.func
};
Grid.defaultProps = {
  children: null,
  className: null,
  baseClassName: "".concat(_constants.CLS_PREFIX, "grid"),
  minColumnWidth: null,
  maxColumnsNumber: 6,
  xs: null,
  sm: null,
  md: null,
  lg: null,
  xl: null,
  gap: null,
  onColumnsChange: null
};
var _default = Grid;
exports.default = _default;