import _defineProperty from "@babel/runtime/helpers/defineProperty";
// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

import React, { Component, Children, cloneElement, createRef } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { CLS_PREFIX } from '../../constants';
import { CSSTransition } from 'react-transition-group';
import Checkbox from '../Checkbox';
import Dropdown from '../Dropdown';
import ContentLoader from '../ContentLoader';
import Translate from '../Translate';
import CardButton from './CardButton';
import PreviewPanel from './PreviewPanel';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
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 Component {
  constructor() {
    super(...arguments);
    _defineProperty(this, "state", {});
    _defineProperty(this, "rootRef", /*#__PURE__*/createRef());
    _defineProperty(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__*/_jsx("div", {
      className: `${baseClassName}__selection`,
      children: /*#__PURE__*/_jsx(Checkbox, {
        checked: isSelected,
        onChange: isSelected => onSelectionChange({
          isSelected
        }),
        children: this.isExtended() ? /*#__PURE__*/_jsx(Translate, {
          content: "Card.select",
          fallback: "Select"
        }) : null
      })
    });
  }
  renderTitle() {
    const {
      baseClassName,
      title,
      titleLink
    } = this.props;
    const titleLinkProps = typeof titleLink === 'string' ? {
      href: titleLink
    } : titleLink;
    return /*#__PURE__*/_jsxs("div", {
      className: `${baseClassName}__title`,
      children: [/*#__PURE__*/_jsx("span", {
        className: `${baseClassName}__title-text`,
        children: title
      }), titleLinkProps && /*#__PURE__*/_jsx(CardButton, {
        component: "a",
        icon: "chain",
        tooltip: /*#__PURE__*/_jsx(Translate, {
          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__*/_jsx("div", {
      className: `${baseClassName}__title-labels`,
      children: Children.map(titleLabels, label => /*#__PURE__*/cloneElement(label, {
        className: classNames(`${baseClassName}__label`, label.props.className)
      }))
    });
  }
  renderLabels() {
    const {
      baseClassName,
      labels
    } = this.props;
    if (labels.length === 0) {
      return null;
    }
    return /*#__PURE__*/_jsx("div", {
      className: `${baseClassName}__labels`,
      children: Children.map(labels, label => /*#__PURE__*/cloneElement(label, {
        className: classNames(`${baseClassName}__label`, label.props.className)
      }))
    });
  }
  renderHeader() {
    const {
      baseClassName
    } = this.props;
    return /*#__PURE__*/_jsxs("div", {
      className: `${baseClassName}__header`,
      children: [this.renderSelection(), this.renderTitle(), this.isExtended() && this.renderLabels(), this.renderButtons()]
    });
  }
  renderRowHeader() {
    const {
      baseClassName,
      subtitle
    } = this.props;
    return /*#__PURE__*/_jsxs("div", {
      className: `${baseClassName}__header`,
      children: [subtitle && /*#__PURE__*/_jsx("div", {
        className: `${baseClassName}__subtitle`,
        children: subtitle
      }), this.renderTitle()]
    });
  }
  renderContent() {
    const {
      baseClassName,
      children
    } = this.props;
    return /*#__PURE__*/_jsx("div", {
      className: `${baseClassName}__main`,
      children: /*#__PURE__*/_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__*/_jsx(CardButton, {
          ...btn
        }, btn.key || index));
      });
    }
    if (menu) {
      result.push( /*#__PURE__*/_jsx(Dropdown, {
        menu: menu,
        menuPlacement: 'bottom-end',
        children: /*#__PURE__*/_jsx(CardButton, {
          icon: "menu"
        })
      }, "menu"));
    }
    if (rowContent && !this.isTile()) {
      result.push( /*#__PURE__*/_jsx(CardButton, {
        icon: {
          name: 'chevron-down',
          flipVertical: this.isExtended()
        },
        onClick: this.handleToggleView,
        tooltip: this.isExtended() ? /*#__PURE__*/_jsx(Translate, {
          content: "Card.collapseCardTooltip",
          fallback: "Collapse the card"
        }) : /*#__PURE__*/_jsx(Translate, {
          content: "Card.expandCardTooltip",
          fallback: "Expand the card"
        })
      }, "toggleView"));
    }
    if (result.length === 0) {
      return null;
    }
    return /*#__PURE__*/_jsx("div", {
      className: `${baseClassName}__buttons`,
      children: result
    });
  }
  renderSideHeader() {
    const {
      sideHeader,
      baseClassName
    } = this.props;
    if (!sideHeader) {
      return null;
    }
    let sideHeaderElement = sideHeader;
    if (sideHeader.type === PreviewPanel) {
      const props = {
        className: classNames(sideHeader.props.className, `${baseClassName}__preview-panel`)
      };
      if (this.isRow()) {
        props.children = null;
      }
      sideHeaderElement = /*#__PURE__*/cloneElement(sideHeader, props);
    }
    return /*#__PURE__*/_jsx("div", {
      className: `${baseClassName}__side-header`,
      children: sideHeaderElement
    });
  }
  renderSideContent() {
    const {
      sideContent,
      baseClassName
    } = this.props;
    if (!sideContent) {
      return null;
    }
    return /*#__PURE__*/_jsx("div", {
      className: `${baseClassName}__side-content`,
      children: sideContent
    });
  }
  renderRow() {
    const {
      baseClassName,
      rowContent
    } = this.props;
    return /*#__PURE__*/_jsx("div", {
      className: `${baseClassName}__inner`,
      children: /*#__PURE__*/_jsxs("div", {
        className: `${baseClassName}__body`,
        children: [this.renderSelection(), this.renderSideHeader(), this.renderRowHeader(), /*#__PURE__*/_jsx("div", {
          className: `${baseClassName}__main`,
          children: /*#__PURE__*/_jsx("div", {
            className: `${baseClassName}__main-content`,
            children: rowContent
          })
        }), this.renderButtons()]
      })
    });
  }
  renderTile() {
    const {
      baseClassName
    } = this.props;
    return /*#__PURE__*/_jsxs("div", {
      className: `${baseClassName}__inner`,
      children: [this.renderHeader(), /*#__PURE__*/_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__*/_jsxs("div", {
      className: `${baseClassName}__inner`,
      children: [this.renderHeader(), /*#__PURE__*/_jsxs("div", {
        className: `${baseClassName}__body`,
        children: [sideHeaderElement || sideContentElement ? /*#__PURE__*/_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__*/_jsx(CSSTransition, {
      classNames: `${baseClassName}-`,
      in: this.isExtended(),
      timeout: 300,
      nodeRef: this.rootRef,
      children: /*#__PURE__*/_jsxs("div", {
        className: classNames(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__*/_jsx(ContentLoader, {
          overlay: true,
          backdrop: true,
          text: progress === true ? null : progress
        })]
      })
    });
  }
}
Card.propTypes = {
  /**
   * Content of the `Card`.
   * @since 0.0.54
   */
  children: PropTypes.node,
  /**
   * View mode.
   * @since 0.0.54
   */
  view: PropTypes.oneOf([VIEW_EXTENDED, VIEW_TILE, VIEW_ROW]),
  /**
   * Visual intent color to apply to component.
   * @since 0.0.54
   */
  intent: PropTypes.oneOf(['warning', 'danger', 'inactive']),
  /**
   * Text of title.
   * @since 0.0.54
   */
  title: PropTypes.node.isRequired,
  /**
   * Link for title.
   * @since 0.0.54
   */
  titleLink: PropTypes.oneOfType([PropTypes.string, PropTypes.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.arrayOf(PropTypes.element),
  /**
   * Text of subtitle.
   * @since 0.0.54
   */
  subtitle: PropTypes.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.arrayOf(PropTypes.element),
  /**
   * List of additional buttons in header.
   * @since 0.0.54
   */
  buttons: PropTypes.arrayOf(PropTypes.shape({
    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]).isRequired,
    onClick: PropTypes.func.isRequired,
    tooltip: PropTypes.node
  })),
  /**
   * See [Menu](#!/Menu).
   * @since 0.3.0
   */
  menu: PropTypes.element,
  /**
   * Selection control.
   * @since 0.0.54
   */
  selection: PropTypes.shape({
    isSelected: PropTypes.bool.isRequired,
    onSelectionChange: PropTypes.func.isRequired
  }),
  /**
   * Side header section. Recommended to use [PreviewPanel](#!/PreviewPanel) component.
   * @since 0.0.54
   */
  sideHeader: PropTypes.element,
  /**
   * Side content section.
   * @since 0.0.54
   */
  sideContent: PropTypes.element,
  /**
   * Content for row view.
   * @since 0.0.54
   */
  rowContent: PropTypes.any,
  /**
   * Indicate the progress state of the card.
   * @since 0.4.1
   */
  progress: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
  /**
   * @ignore
   */
  className: PropTypes.string,
  /**
   * @ignore
   */
  baseClassName: PropTypes.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: `${CLS_PREFIX}card`
};
export default Card;