import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
import React, { cloneElement, Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Measure from 'react-measure';
import { CLS_PREFIX } from '../../constants';

/**
 * `Grid` component is used to layout and align content based on 12-column system.
 * @since 0.0.48
 */
class Grid extends Component {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "state", {
      xs: this.props.xs
    });

    _defineProperty(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 = classNames(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.createElement("div", _extends({
      className: computedClassName
    }, props), minColumnWidth > 0 && !this.state.xs ? null : children);

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

    return result;
  }

}

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

  /**
   * @ignore
   */
  className: PropTypes.string,

  /**
   * @ignore
   */
  baseClassName: PropTypes.string,

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

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

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

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

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

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

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

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

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