'use strict';

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var React = require('react');
var classnames = require('classnames');
var PropTypes = require('prop-types');
var index$1 = require('../ToggleTip/index.js');
var useHasTextOverflow = require('../../hooks/useHasTextOverflow.js');
var usePopoverPositioning = require('../../hooks/usePopoverPositioning.js');
var index = require('../Tooltip/index.js');
var Settings = require('../../constants/Settings.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
var React__default = /*#__PURE__*/_interopDefault(React);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);

var iotPrefix = Settings.settings.iotPrefix;
var propTypes = {
  id: PropTypes__default.default.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__default.default.element,
  // Allows the title to wrap over two rows
  hasTitleWrap: PropTypes__default.default.bool.isRequired,
  subtitle: PropTypes__default.default.string,
  testId: PropTypes__default.default.string.isRequired,
  title: PropTypes__default.default.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__default.default.element,
  titleTooltipIconDescription: PropTypes__default.default.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 = React.useRef();
  var subTitleRef = React.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.usePopoverPositioning({
      direction: 'bottom',
      defaultAlignment: 'center',
      menuOffset: index.getTooltipMenuOffset,
      useAutoPositioning: true,
      isOverflowMenu: true // Needed to preserve default direction (bottom)
    }),
    _usePopoverPositionin2 = _slicedToArray__default.default(_usePopoverPositionin, 2),
    calculateMenuOffset = _usePopoverPositionin2[0],
    _usePopoverPositionin3 = _usePopoverPositionin2[1],
    adjustedDirection = _usePopoverPositionin3.adjustedDirection,
    adjustedAlignment = _usePopoverPositionin3.adjustedAlignment;
  var renderMainTitle = function renderMainTitle() {
    return hasTitleTooltipFromTruncation || hasExternalTitleTextTooltip ? /*#__PURE__*/React__default.default.createElement(index$1.ToggleTip, {
      align: adjustedAlignment,
      menuOffset: calculateMenuOffset,
      direction: adjustedDirection,
      "data-testid": "".concat(testId, "-title-tooltip"),
      useAutoPositioning: true,
      toggleTipLabelRef: titleRef,
      showIcon: false,
      className: classnames__default.default("".concat(iotPrefix, "--card--title--text__overflow"), "".concat(iotPrefix, "--card--title--text"), "".concat(iotPrefix, "--card-heading-clickable"), _defineProperty__default.default(_defineProperty__default.default({}, "".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.default.createElement(React__default.default.Fragment, null, truncatesTitle && /*#__PURE__*/React__default.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.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.default.createElement("div", {
      ref: titleRef,
      "data-testid": "".concat(testId, "-title-notip"),
      className: classnames__default.default("".concat(iotPrefix, "--card--title--text"), _defineProperty__default.default({}, "".concat(iotPrefix, "--card--title--text--wrapped"), hasTitleWrap && !subtitle))
    }, title);
  };
  var renderSubTitle = function renderSubTitle() {
    return !subtitle ? null : hasSubTitleTooltip ? /*#__PURE__*/React__default.default.createElement(index$1.ToggleTip, {
      align: adjustedAlignment,
      menuOffset: calculateMenuOffset,
      direction: adjustedDirection,
      "data-testid": "".concat(testId, "-subtitle"),
      toggleTipLabelRef: subTitleRef,
      useAutoPositioning: true,
      showIcon: false,
      className: classnames__default.default("".concat(iotPrefix, "--card--subtitle--text"), "".concat(iotPrefix, "--card-heading-clickable"), _defineProperty__default.default({}, "".concat(iotPrefix, "--card--subtitle--text--padded"), hasInfoIconTooltip)),
      triggerText: subtitle,
      content: subtitle
    }) : /*#__PURE__*/React__default.default.createElement("div", {
      ref: subTitleRef,
      "data-testid": "".concat(testId, "-subtitle"),
      className: classnames__default.default("".concat(iotPrefix, "--card--subtitle--text"), _defineProperty__default.default({}, "".concat(iotPrefix, "--card--subtitle--text--padded"), hasInfoIconTooltip))
    }, subtitle);
  };
  return /*#__PURE__*/React__default.default.createElement("span", {
    "data-testid": "".concat(testId, "-title"),
    className: "".concat(iotPrefix, "--card--title"),
    title: hasExternalTitleTextTooltip ? '' : title
  }, renderMainTitle(), hasInfoIconTooltip && /*#__PURE__*/React__default.default.createElement(index$1.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
    }
  }
};

exports.CardTitle = CardTitle;
