import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import React__default, { useRef } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { ToggleTip } from '../ToggleTip/index.js';
import useHasTextOverflow from '../../hooks/useHasTextOverflow.js';
import { usePopoverPositioning } from '../../hooks/usePopoverPositioning.js';
import { getTooltipMenuOffset } from '../Tooltip/index.js';
import { settings } from '../../constants/Settings.js';

var iotPrefix = settings.iotPrefix;
var propTypes = {
  id: PropTypes.string.isRequired,
  /** Adds an info icon after the title that when clicked shows a tooltip with this content.
   * Cannot be used together with the tooltipDefinition prop
   */
  infoIconTooltip: PropTypes.element,
  // Allows the title to wrap over two rows
  hasTitleWrap: PropTypes.bool.isRequired,
  subtitle: PropTypes.string,
  testId: PropTypes.string.isRequired,
  title: PropTypes.string,
  /** Adds tooltip to the title (no info icon) that when clicked shows a tooltip with this content.
   * Cannot be used together with the tooltip prop or the or the hasTitleWrap prop.
   */
  titleTextTooltip: PropTypes.element,
  titleTooltipIconDescription: PropTypes.string.isRequired
};
var defaultProps = {
  infoIconTooltip: undefined,
  subtitle: undefined,
  title: undefined,
  titleTextTooltip: undefined
};
var CardTitle = function CardTitle(_ref // eslint-disable-line react/prop-types
) {
  var id = _ref.id,
    hasTitleWrap = _ref.hasTitleWrap,
    infoIconTooltip = _ref.infoIconTooltip,
    subtitle = _ref.subtitle,
    testId = _ref.testId,
    title = _ref.title,
    titleTextTooltip = _ref.titleTextTooltip,
    titleTooltipIconDescription = _ref.titleTooltipIconDescription;
  var titleRef = useRef();
  var subTitleRef = useRef();
  var truncatesTitle = useHasTextOverflow(titleRef, title);
  var hasExternalTitleTextTooltip = titleTextTooltip;
  var hasTitleTooltipFromTruncation = truncatesTitle && !titleTextTooltip;
  var hasInfoIconTooltip = infoIconTooltip && !hasExternalTitleTextTooltip;
  var hasSubTitleTooltip = useHasTextOverflow(subTitleRef, subtitle);
  var _usePopoverPositionin = usePopoverPositioning({
      direction: 'bottom',
      defaultAlignment: 'center',
      menuOffset: getTooltipMenuOffset,
      useAutoPositioning: true,
      isOverflowMenu: true // Needed to preserve default direction (bottom)
    }),
    _usePopoverPositionin2 = _slicedToArray(_usePopoverPositionin, 2),
    calculateMenuOffset = _usePopoverPositionin2[0],
    _usePopoverPositionin3 = _usePopoverPositionin2[1],
    adjustedDirection = _usePopoverPositionin3.adjustedDirection,
    adjustedAlignment = _usePopoverPositionin3.adjustedAlignment;
  var renderMainTitle = function renderMainTitle() {
    return hasTitleTooltipFromTruncation || hasExternalTitleTextTooltip ? /*#__PURE__*/React__default.createElement(ToggleTip, {
      align: adjustedAlignment,
      menuOffset: calculateMenuOffset,
      direction: adjustedDirection,
      "data-testid": "".concat(testId, "-title-tooltip"),
      useAutoPositioning: true,
      toggleTipLabelRef: titleRef,
      showIcon: false,
      className: classnames("".concat(iotPrefix, "--card--title--text__overflow"), "".concat(iotPrefix, "--card--title--text"), "".concat(iotPrefix, "--card-heading-clickable"), _defineProperty(_defineProperty({}, "".concat(iotPrefix, "--card--title--text--wrapped"), hasTitleWrap && !subtitle && !hasExternalTitleTextTooltip), "".concat(iotPrefix, "--card-title__title-text--has-title-text-tooltip"), hasExternalTitleTextTooltip)),
      triggerText: title,
      content: hasExternalTitleTextTooltip ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, truncatesTitle && /*#__PURE__*/React__default.createElement("p", {
        "data-testid": "".concat(testId, "-title-tooltip-full-title"),
        className: "".concat(iotPrefix, "--card-title__title-text-tooltip-full-title")
      }, title), /*#__PURE__*/React__default.createElement("div", {
        "data-testid": "".concat(testId, "-title-tooltip-conten-node"),
        className: "".concat(iotPrefix, "--card-title__title-text-tooltip-content")
      }, titleTextTooltip)) : title
    }) : /*#__PURE__*/React__default.createElement("div", {
      ref: titleRef,
      "data-testid": "".concat(testId, "-title-notip"),
      className: classnames("".concat(iotPrefix, "--card--title--text"), _defineProperty({}, "".concat(iotPrefix, "--card--title--text--wrapped"), hasTitleWrap && !subtitle))
    }, title);
  };
  var renderSubTitle = function renderSubTitle() {
    return !subtitle ? null : hasSubTitleTooltip ? /*#__PURE__*/React__default.createElement(ToggleTip, {
      align: adjustedAlignment,
      menuOffset: calculateMenuOffset,
      direction: adjustedDirection,
      "data-testid": "".concat(testId, "-subtitle"),
      toggleTipLabelRef: subTitleRef,
      useAutoPositioning: true,
      showIcon: false,
      className: classnames("".concat(iotPrefix, "--card--subtitle--text"), "".concat(iotPrefix, "--card-heading-clickable"), _defineProperty({}, "".concat(iotPrefix, "--card--subtitle--text--padded"), hasInfoIconTooltip)),
      triggerText: subtitle,
      content: subtitle
    }) : /*#__PURE__*/React__default.createElement("div", {
      ref: subTitleRef,
      "data-testid": "".concat(testId, "-subtitle"),
      className: classnames("".concat(iotPrefix, "--card--subtitle--text"), _defineProperty({}, "".concat(iotPrefix, "--card--subtitle--text--padded"), hasInfoIconTooltip))
    }, subtitle);
  };
  return /*#__PURE__*/React__default.createElement("span", {
    "data-testid": "".concat(testId, "-title"),
    className: "".concat(iotPrefix, "--card--title"),
    title: hasExternalTitleTextTooltip ? '' : title
  }, renderMainTitle(), hasInfoIconTooltip && /*#__PURE__*/React__default.createElement(ToggleTip, {
    "data-testid": "".concat(testId, "-tooltip"),
    triggerId: "card-tooltip-trigger-".concat(id),
    useAutoPositioning: true,
    tooltipId: "card-tooltip-".concat(id),
    triggerClassName: "".concat(iotPrefix, "--card--header--tooltip"),
    id: "card-tooltip-".concat(id) // https://github.com/carbon-design-system/carbon/pull/6744
    ,
    triggerText: "",
    iconDescription: titleTooltipIconDescription,
    content: infoIconTooltip
  }), renderSubTitle());
};
CardTitle.propTypes = propTypes;
CardTitle.defaultProps = defaultProps;
CardTitle.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CardTitle",
  "props": {
    "infoIconTooltip": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Adds an info icon after the title that when clicked shows a tooltip with this content.\nCannot be used together with the tooltipDefinition prop",
      "type": {
        "name": "element"
      },
      "required": false
    },
    "subtitle": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "title": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "titleTextTooltip": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Adds tooltip to the title (no info icon) that when clicked shows a tooltip with this content.\nCannot be used together with the tooltip prop or the or the hasTitleWrap prop.",
      "type": {
        "name": "element"
      },
      "required": false
    },
    "id": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": true
    },
    "hasTitleWrap": {
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": true
    },
    "testId": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": true
    },
    "titleTooltipIconDescription": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": true
    }
  }
};

export { CardTitle };
