// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

import React, { Component, cloneElement, isValidElement, Children } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { CLS_PREFIX } from '../../constants';
import Icon, { NAMES, ICON_SIZE_32 } from '../Icon';
import Media from '../Media';
import Heading from '../Heading';
import Tooltip from '../Tooltip';
import { createProxyProps, wrapFunction } from '../utils';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const VIEW_SIMPLE = 'simple';
const VIEW_CARD = 'card';

/**
 * `Item` component is element of [ItemList](#!/ItemList) and it is presented as
 * a combination of icon, text title and content (similar to [Media](#!/Media)).
 * @since 0.0.48
 */
class Item extends Component {
  renderTitle(title) {
    if (!title) {
      return null;
    }
    const {
      baseClassName,
      view
    } = this.props;
    let wrappable = false;
    if (typeof title === 'string') {
      title = /*#__PURE__*/_jsx("span", {
        children: title
      });
      wrappable = true;
    } else if (typeof title === 'object' && ! /*#__PURE__*/isValidElement(title)) {
      title = /*#__PURE__*/_jsx("a", {
        ...title
      });
      wrappable = true;
    }
    if (wrappable && view === 'card') {
      title = /*#__PURE__*/_jsx(Heading, {
        level: 3,
        children: title
      });
    }
    if ( /*#__PURE__*/isValidElement(title)) {
      title = /*#__PURE__*/cloneElement(title, {
        className: classNames(`${baseClassName}__title`, title.props.className)
      });
    }
    return title;
  }
  renderIcon(icon) {
    if (!icon) {
      return null;
    }
    if (typeof icon === 'string') {
      return Icon.create({}, {
        size: ICON_SIZE_32,
        [NAMES.indexOf(icon) === -1 ? 'src' : 'name']: icon
      });
    }
    return Icon.create(icon, {
      size: ICON_SIZE_32
    });
  }
  render() {
    const {
      children,
      baseClassName,
      component: Tag,
      view,
      className,
      icon,
      title,
      description,
      footer,
      value,
      tooltip,
      disabled,
      hoverable,
      ...props
    } = this.props;
    if (props.onClick) {
      if (disabled) {
        props.onClick = e => e.preventDefault();
      } else {
        props.tabIndex = 0;
        props.onKeyDown = wrapFunction(props.onKeyDown, e => {
          if (e.key === 'Enter') {
            e.preventDefault();
            e.currentTarget.click();
          }
        });
      }
    }
    const item = /*#__PURE__*/_jsxs(Tag, {
      className: classNames(baseClassName, {
        [`${baseClassName}--card`]: view === 'card',
        [`${baseClassName}--disabled`]: disabled,
        [`${baseClassName}--hoverable`]: hoverable
      }, className),
      ...props,
      children: [/*#__PURE__*/_jsxs(Media, {
        image: this.renderIcon(icon),
        title: this.renderTitle(title),
        className: `${baseClassName}__media`,
        children: [description && /*#__PURE__*/_jsx("div", {
          className: `${baseClassName}__description`,
          children: description
        }), Children.toArray(children).length ? /*#__PURE__*/_jsx("div", {
          className: `${baseClassName}__content`,
          children: children
        }) : null]
      }), footer && /*#__PURE__*/_jsx("footer", {
        className: `${baseClassName}__footer`,
        children: footer
      })]
    });
    if (tooltip) {
      return createProxyProps(props => /*#__PURE__*/_jsx(Tooltip, {
        title: tooltip,
        children: /*#__PURE__*/cloneElement(item, props)
      }));
    }
    return item;
  }
}
Item.propTypes = {
  /**
   * Component to render as the root element. Useful when rendering a `Item` as `<a>` or `<Link>`.
   * @since 0.0.48
   */
  component: PropTypes.elementType,
  /**
   * View mode.
   * @since 2.1.0
   */
  view: PropTypes.oneOf([VIEW_SIMPLE, VIEW_CARD]),
  /**
   * Icon.
   * @since 0.0.48
   */
  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
  /**
   * Title.
   * @since 0.0.48
   */
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.element]),
  /**
   * Content for footer.
   * @since 2.1.0
   */
  footer: PropTypes.node,
  /**
   * Description. Renders as small grey text.
   * @since 2.1.0
   */
  description: PropTypes.node,
  /**
   * Content of the `Item`.
   * @since 0.0.48
   */
  children: PropTypes.node,
  /**
   * An unique value. It needs only in ItemList with selectable view.
   * @since 2.3.0
   */
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  /**
   * Tooltip for component.
   * @since 2.5.1
   */
  tooltip: PropTypes.node,
  /**
   * @ignore
   */
  className: PropTypes.string,
  /**
   * @ignore
   */
  baseClassName: PropTypes.string,
  /**
   * Whether disabled or not.
   * @since 3.15.0
   */
  disabled: PropTypes.bool,
  /**
   * Add hover shadow and pointer cursor.
   * @since 3.26.0
   */
  hoverable: PropTypes.bool
};
Item.defaultProps = {
  component: 'div',
  view: VIEW_SIMPLE,
  hoverable: undefined,
  title: undefined,
  description: undefined,
  icon: undefined,
  footer: undefined,
  children: undefined,
  value: undefined,
  tooltip: undefined,
  className: undefined,
  disabled: undefined,
  baseClassName: `${CLS_PREFIX}item`
};
export default Item;