"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 = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _constants = require("../../constants");
var _reactTransitionGroup = require("react-transition-group");
var _Checkbox = _interopRequireDefault(require("../Checkbox"));
var _Dropdown = _interopRequireDefault(require("../Dropdown"));
var _ContentLoader = _interopRequireDefault(require("../ContentLoader"));
var _Translate = _interopRequireDefault(require("../Translate"));
var _CardButton = _interopRequireDefault(require("./CardButton"));
var _PreviewPanel = _interopRequireDefault(require("./PreviewPanel"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

const VIEW_TILE = 'tile';
const VIEW_EXTENDED = 'extended';
const VIEW_ROW = 'row';

/**
 * @deprecated `Card` component is a part of [CardList](#!/CardList).
 * @since 0.0.54
 */
class Card extends _react.Component {
  constructor() {
    super(...arguments);
    (0, _defineProperty2.default)(this, "state", {});
    (0, _defineProperty2.default)(this, "rootRef", /*#__PURE__*/(0, _react.createRef)());
    (0, _defineProperty2.default)(this, "handleToggleView", () => {
      const {
        view
      } = this.state;
      this.setState({
        view: view === VIEW_EXTENDED ? VIEW_ROW : VIEW_EXTENDED
      });
    });
  }
  static getDerivedStateFromProps(props, state) {
    const {
      view
    } = props;
    const {
      prevView
    } = state;
    const nextState = {};
    if (view !== prevView) {
      nextState.view = view;
    }
    nextState.prevView = view;
    return nextState;
  }
  renderSelection() {
    const {
      baseClassName,
      selection
    } = this.props;
    if (!selection) {
      return null;
    }
    const {
      isSelected,
      onSelectionChange
    } = selection;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: `${baseClassName}__selection`,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
        checked: isSelected,
        onChange: isSelected => onSelectionChange({
          isSelected
        }),
        children: this.isExtended() ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
          content: "Card.select",
          fallback: "Select"
        }) : null
      })
    });
  }
  renderTitle() {
    const {
      baseClassName,
      title,
      titleLink
    } = this.props;
    const titleLinkProps = typeof titleLink === 'string' ? {
      href: titleLink
    } : titleLink;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: `${baseClassName}__title`,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        className: `${baseClassName}__title-text`,
        children: title
      }), titleLinkProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardButton.default, {
        component: "a",
        icon: "chain",
        tooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
          content: "Card.titleLinkTooltip",
          fallback: "Go to page"
        }),
        ...titleLinkProps
      }), this.isExtended() && this.renderTitleLabels()]
    });
  }
  renderTitleLabels() {
    const {
      baseClassName,
      titleLabels
    } = this.props;
    if (titleLabels.length === 0) {
      return null;
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: `${baseClassName}__title-labels`,
      children: _react.Children.map(titleLabels, label => /*#__PURE__*/(0, _react.cloneElement)(label, {
        className: (0, _classnames.default)(`${baseClassName}__label`, label.props.className)
      }))
    });
  }
  renderLabels() {
    const {
      baseClassName,
      labels
    } = this.props;
    if (labels.length === 0) {
      return null;
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: `${baseClassName}__labels`,
      children: _react.Children.map(labels, label => /*#__PURE__*/(0, _react.cloneElement)(label, {
        className: (0, _classnames.default)(`${baseClassName}__label`, label.props.className)
      }))
    });
  }
  renderHeader() {
    const {
      baseClassName
    } = this.props;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: `${baseClassName}__header`,
      children: [this.renderSelection(), this.renderTitle(), this.isExtended() && this.renderLabels(), this.renderButtons()]
    });
  }
  renderRowHeader() {
    const {
      baseClassName,
      subtitle
    } = this.props;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: `${baseClassName}__header`,
      children: [subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: `${baseClassName}__subtitle`,
        children: subtitle
      }), this.renderTitle()]
    });
  }
  renderContent() {
    const {
      baseClassName,
      children
    } = this.props;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: `${baseClassName}__main`,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: `${baseClassName}__main-content`,
        children: children
      })
    });
  }
  isExtended() {
    const {
      view
    } = this.state;
    return !this.isTile() && view === VIEW_EXTENDED;
  }
  isTile() {
    const {
      view
    } = this.state;
    return view === VIEW_TILE;
  }
  isRow() {
    const {
      view
    } = this.state;
    return !this.isTile() && view === VIEW_ROW;
  }
  renderButtons() {
    const {
      baseClassName,
      rowContent,
      menu,
      buttons
    } = this.props;
    const result = [];
    if (!this.isRow()) {
      buttons.forEach((btn, index) => {
        result.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardButton.default, {
          ...btn
        }, btn.key || index));
      });
    }
    if (menu) {
      result.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default, {
        menu: menu,
        menuPlacement: 'bottom-end',
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardButton.default, {
          icon: "menu"
        })
      }, "menu"));
    }
    if (rowContent && !this.isTile()) {
      result.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardButton.default, {
        icon: {
          name: 'chevron-down',
          flipVertical: this.isExtended()
        },
        onClick: this.handleToggleView,
        tooltip: this.isExtended() ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
          content: "Card.collapseCardTooltip",
          fallback: "Collapse the card"
        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
          content: "Card.expandCardTooltip",
          fallback: "Expand the card"
        })
      }, "toggleView"));
    }
    if (result.length === 0) {
      return null;
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: `${baseClassName}__buttons`,
      children: result
    });
  }
  renderSideHeader() {
    const {
      sideHeader,
      baseClassName
    } = this.props;
    if (!sideHeader) {
      return null;
    }
    let sideHeaderElement = sideHeader;
    if (sideHeader.type === _PreviewPanel.default) {
      const props = {
        className: (0, _classnames.default)(sideHeader.props.className, `${baseClassName}__preview-panel`)
      };
      if (this.isRow()) {
        props.children = null;
      }
      sideHeaderElement = /*#__PURE__*/(0, _react.cloneElement)(sideHeader, props);
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: `${baseClassName}__side-header`,
      children: sideHeaderElement
    });
  }
  renderSideContent() {
    const {
      sideContent,
      baseClassName
    } = this.props;
    if (!sideContent) {
      return null;
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: `${baseClassName}__side-content`,
      children: sideContent
    });
  }
  renderRow() {
    const {
      baseClassName,
      rowContent
    } = this.props;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: `${baseClassName}__inner`,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: `${baseClassName}__body`,
        children: [this.renderSelection(), this.renderSideHeader(), this.renderRowHeader(), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: `${baseClassName}__main`,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            className: `${baseClassName}__main-content`,
            children: rowContent
          })
        }), this.renderButtons()]
      })
    });
  }
  renderTile() {
    const {
      baseClassName
    } = this.props;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: `${baseClassName}__inner`,
      children: [this.renderHeader(), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: `${baseClassName}__body`,
        children: [this.renderSideHeader(), this.renderContent()]
      }), this.renderSideContent()]
    });
  }
  renderExtended() {
    const {
      baseClassName
    } = this.props;
    const sideHeaderElement = this.renderSideHeader();
    const sideContentElement = this.renderSideContent();
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: `${baseClassName}__inner`,
      children: [this.renderHeader(), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: `${baseClassName}__body`,
        children: [sideHeaderElement || sideContentElement ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: `${baseClassName}__side`,
          children: [sideHeaderElement, sideContentElement]
        }) : null, this.renderContent()]
      })]
    });
  }
  render() {
    const {
      baseClassName,
      className,
      children,
      view,
      intent,
      title,
      subtitle,
      titleLink,
      titleLabels,
      selection,
      rowContent,
      sideHeader,
      sideContent,
      buttons,
      menu,
      labels,
      progress,
      ...props
    } = this.props;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
      classNames: `${baseClassName}-`,
      in: this.isExtended(),
      timeout: 300,
      nodeRef: this.rootRef,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: (0, _classnames.default)(baseClassName, {
          [`${baseClassName}--extended`]: this.isExtended(),
          [`${baseClassName}--tile`]: this.isTile(),
          [`${baseClassName}--row`]: this.isRow(),
          [`${baseClassName}--${intent}`]: intent,
          [`${baseClassName}--progress`]: progress
        }, className),
        ...props,
        ref: this.rootRef,
        children: [this.isExtended() && this.renderExtended(), this.isTile() && this.renderTile(), this.isRow() && this.renderRow(), progress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ContentLoader.default, {
          overlay: true,
          backdrop: true,
          text: progress === true ? null : progress
        })]
      })
    });
  }
}
Card.propTypes = {
  /**
   * Content of the `Card`.
   * @since 0.0.54
   */
  children: _propTypes.default.node,
  /**
   * View mode.
   * @since 0.0.54
   */
  view: _propTypes.default.oneOf([VIEW_EXTENDED, VIEW_TILE, VIEW_ROW]),
  /**
   * Visual intent color to apply to component.
   * @since 0.0.54
   */
  intent: _propTypes.default.oneOf(['warning', 'danger', 'inactive']),
  /**
   * Text of title.
   * @since 0.0.54
   */
  title: _propTypes.default.node.isRequired,
  /**
   * Link for title.
   * @since 0.0.54
   */
  titleLink: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
  /**
   * List of labels in header, which should appear right after the title. See [Label](#!/Label) component for details.
   * @since 1.6.0
   */
  titleLabels: _propTypes.default.arrayOf(_propTypes.default.element),
  /**
   * Text of subtitle.
   * @since 0.0.54
   */
  subtitle: _propTypes.default.node,
  /**
   * List of labels in header, which should appear at the end of header. See [Label](#!/Label) component for details.
   * @since 0.0.54
   */
  labels: _propTypes.default.arrayOf(_propTypes.default.element),
  /**
   * List of additional buttons in header.
   * @since 0.0.54
   */
  buttons: _propTypes.default.arrayOf(_propTypes.default.shape({
    icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]).isRequired,
    onClick: _propTypes.default.func.isRequired,
    tooltip: _propTypes.default.node
  })),
  /**
   * See [Menu](#!/Menu).
   * @since 0.3.0
   */
  menu: _propTypes.default.element,
  /**
   * Selection control.
   * @since 0.0.54
   */
  selection: _propTypes.default.shape({
    isSelected: _propTypes.default.bool.isRequired,
    onSelectionChange: _propTypes.default.func.isRequired
  }),
  /**
   * Side header section. Recommended to use [PreviewPanel](#!/PreviewPanel) component.
   * @since 0.0.54
   */
  sideHeader: _propTypes.default.element,
  /**
   * Side content section.
   * @since 0.0.54
   */
  sideContent: _propTypes.default.element,
  /**
   * Content for row view.
   * @since 0.0.54
   */
  rowContent: _propTypes.default.any,
  /**
   * Indicate the progress state of the card.
   * @since 0.4.1
   */
  progress: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.node]),
  /**
   * @ignore
   */
  className: _propTypes.default.string,
  /**
   * @ignore
   */
  baseClassName: _propTypes.default.string
};
Card.defaultProps = {
  children: null,
  view: VIEW_EXTENDED,
  intent: null,
  subtitle: '',
  titleLink: null,
  titleLabels: [],
  labels: [],
  buttons: [],
  menu: null,
  selection: null,
  sideHeader: null,
  sideContent: null,
  rowContent: null,
  progress: false,
  className: null,
  baseClassName: `${_constants.CLS_PREFIX}card`
};
var _default = exports.default = Card;