'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
require('core-js/modules/es.symbol.js');
require('core-js/modules/es.array.filter.js');
require('core-js/modules/es.object.get-own-property-descriptor.js');
require('core-js/modules/es.object.get-own-property-descriptors.js');
require('core-js/modules/es.object.keys.js');
require('core-js/modules/es.object.to-string.js');
require('core-js/modules/es.regexp.to-string.js');
require('core-js/modules/web.dom-collections.for-each.js');
var classnames = require('classnames');
var PropTypes = require('prop-types');
var React = require('react');
var react = require('@carbon/react');
var keyboard = require('../../internal/keyboard.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 _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
var React__default = /*#__PURE__*/_interopDefault(React);

var _excluded = ["align", "autoAlign", "className", "children", "definition", "defaultOpen", "id", "openOnHover", "tooltipText", "triggerClassName", "as", "renderTrigger"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var carbonPrefix = Settings.settings.prefix;
var DefinitionTooltip = function DefinitionTooltip(_ref) {
  var _ref$align = _ref.align,
    align = _ref$align === void 0 ? 'bottom' : _ref$align,
    autoAlign = _ref.autoAlign,
    className = _ref.className,
    children = _ref.children,
    definition = _ref.definition,
    _ref$defaultOpen = _ref.defaultOpen,
    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
    id = _ref.id,
    openOnHover = _ref.openOnHover,
    tooltipText = _ref.tooltipText,
    triggerClassName = _ref.triggerClassName,
    _ref$as = _ref.as,
    as = _ref$as === void 0 ? 'button' : _ref$as,
    renderTrigger = _ref.renderTrigger,
    rest = _objectWithoutProperties__default.default(_ref, _excluded);
  var _useState = React.useState(defaultOpen),
    _useState2 = _slicedToArray__default.default(_useState, 2),
    isOpen = _useState2[0],
    setOpen = _useState2[1];
  var prefix = carbonPrefix || 'cds';

  // Generate a unique ID if not provided
  var tooltipId = id || "definition-tooltip-".concat(Math.random().toString(36).substr(2, 9));
  function onKeyDown(event) {
    if (isOpen && keyboard.match(event, keyboard.keys.Escape)) {
      event.stopPropagation();
      setOpen(false);
    }
  }

  // Common trigger props
  var triggerProps = _objectSpread({
    className: classnames__default.default("".concat(prefix, "--definition-term"), triggerClassName),
    'aria-controls': tooltipId,
    'aria-describedby': tooltipId,
    'aria-expanded': isOpen,
    tabIndex: 0,
    onBlur: function onBlur() {
      setOpen(false);
    },
    onMouseDown: function onMouseDown(event) {
      // We use onMouseDown rather than onClick to make sure this triggers
      // before onFocus.
      if (event.button === 0) {
        // Prevent default for anchor tags
        if (as === 'a' || typeof as === 'string' && as.toLowerCase() === 'a') {
          event.preventDefault();
        }
        setOpen(!isOpen);
      }
    },
    onKeyDown: onKeyDown
  }, rest);

  // Add onClick for anchor tags
  if (as === 'a' || typeof as === 'string' && as.toLowerCase() === 'a') {
    triggerProps.onClick = function (event) {
      event.preventDefault();
      setOpen(!isOpen);
    };
    // Add href for anchor tags if not provided
    if (!rest.href) {
      triggerProps.href = '#';
    }
  }

  // Add type for button
  if (as === 'button' || typeof as === 'string' && as.toLowerCase() === 'button') {
    triggerProps.type = rest.type || 'button';
  }

  // Determine the trigger element
  var TriggerElement;
  if (renderTrigger) {
    // Option 1: Custom render function
    TriggerElement = function TriggerElement() {
      return renderTrigger(triggerProps, children, isOpen, setOpen);
    };
  } else if (typeof as === 'string') {
    // Option 2: HTML element string ('button', 'a', 'span', etc.)
    TriggerElement = function TriggerElement() {
      return /*#__PURE__*/React__default.default.createElement(as, triggerProps, children);
    };
  } else {
    // Option 3: Custom React component
    TriggerElement = function TriggerElement() {
      return /*#__PURE__*/React__default.default.createElement(as, triggerProps, children);
    };
  }
  return /*#__PURE__*/React__default.default.createElement(react.Popover, {
    align: align,
    className: className,
    autoAlign: autoAlign,
    dropShadow: false,
    highContrast: true,
    onMouseLeave: function onMouseLeave() {
      setOpen(false);
    },
    onMouseEnter: function onMouseEnter() {
      if (openOnHover) {
        setOpen(true);
      }
    },
    onFocus: function onFocus() {
      setOpen(true);
    },
    open: isOpen
  }, /*#__PURE__*/React__default.default.createElement(TriggerElement, null), /*#__PURE__*/React__default.default.createElement(react.PopoverContent, {
    className: "".concat(prefix, "--definition-tooltip"),
    id: tooltipId
  }, tooltipText !== null && tooltipText !== void 0 ? tooltipText : definition));
};
DefinitionTooltip.propTypes = {
  /**
   * Specify how the trigger should align with the tooltip
   */
  align: PropTypes__default.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']),
  /**
   * Will auto-align the popover. This prop is currently experimental and is
   * subject to future changes. Requires React v17+
   */
  autoAlign: PropTypes__default.default.bool,
  /**
   * The element type or custom component to render as the trigger.
   * Can be 'button', 'a', 'span', or a custom React component.
   */
  as: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.elementType]),
  /**
   * The `children` prop will be used as the value that is being defined
   */
  children: PropTypes__default.default.node.isRequired,
  /**
   * Specify an optional className to be applied to the container node
   */
  className: PropTypes__default.default.string,
  /**
   * Specify whether the tooltip should be open when it first renders
   */
  defaultOpen: PropTypes__default.default.bool,
  /**
   * The `definition` prop is used as the content inside of the tooltip that
   * appears when a user interacts with the element rendered by the `children`
   * prop
   */
  definition: PropTypes__default.default.node.isRequired,
  /**
   * Alternative to definition prop for tooltip content
   */
  tooltipText: PropTypes__default.default.node,
  /**
   * Provide a value that will be assigned as the id of the tooltip
   */
  id: PropTypes__default.default.string,
  /**
   * Specifies whether or not the `DefinitionTooltip` should open on hover or not
   */
  openOnHover: PropTypes__default.default.bool,
  /**
   * Custom render function for the trigger element.
   * Receives (props, children, isOpen, setOpen) as arguments.
   * If provided, this takes precedence over the `as` prop.
   */
  renderTrigger: PropTypes__default.default.func,
  /**
   * The CSS class name of the trigger element
   */
  triggerClassName: PropTypes__default.default.string
};
DefinitionTooltip.defaultProps = {
  align: 'bottom',
  as: 'button',
  autoAlign: false,
  className: undefined,
  defaultOpen: false,
  tooltipText: '',
  id: undefined,
  openOnHover: false,
  renderTrigger: undefined,
  triggerClassName: undefined
};
DefinitionTooltip.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "DefinitionTooltip",
  "props": {
    "align": {
      "defaultValue": {
        "value": "'bottom'",
        "computed": false
      },
      "description": "Specify how the trigger should align with the tooltip",
      "type": {
        "name": "enum",
        "value": [{
          "value": "'top'",
          "computed": false
        }, {
          "value": "'top-left'",
          "computed": false
        }, {
          "value": "'top-right'",
          "computed": false
        }, {
          "value": "'bottom'",
          "computed": false
        }, {
          "value": "'bottom-left'",
          "computed": false
        }, {
          "value": "'bottom-right'",
          "computed": false
        }, {
          "value": "'left'",
          "computed": false
        }, {
          "value": "'left-bottom'",
          "computed": false
        }, {
          "value": "'left-top'",
          "computed": false
        }, {
          "value": "'right'",
          "computed": false
        }, {
          "value": "'right-bottom'",
          "computed": false
        }, {
          "value": "'right-top'",
          "computed": false
        }, {
          "value": "'top-start'",
          "computed": false
        }, {
          "value": "'top-end'",
          "computed": false
        }, {
          "value": "'bottom-start'",
          "computed": false
        }, {
          "value": "'bottom-end'",
          "computed": false
        }, {
          "value": "'left-end'",
          "computed": false
        }, {
          "value": "'left-start'",
          "computed": false
        }, {
          "value": "'right-end'",
          "computed": false
        }, {
          "value": "'right-start'",
          "computed": false
        }]
      },
      "required": false
    },
    "defaultOpen": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Specify whether the tooltip should be open when it first renders",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "as": {
      "defaultValue": {
        "value": "'button'",
        "computed": false
      },
      "description": "The element type or custom component to render as the trigger.\nCan be 'button', 'a', 'span', or a custom React component.",
      "type": {
        "name": "union",
        "value": [{
          "name": "string"
        }, {
          "name": "elementType"
        }]
      },
      "required": false
    },
    "autoAlign": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Will auto-align the popover. This prop is currently experimental and is\nsubject to future changes. Requires React v17+",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "className": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Specify an optional className to be applied to the container node",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "tooltipText": {
      "defaultValue": {
        "value": "''",
        "computed": false
      },
      "description": "Alternative to definition prop for tooltip content",
      "type": {
        "name": "node"
      },
      "required": false
    },
    "id": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Provide a value that will be assigned as the id of the tooltip",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "openOnHover": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Specifies whether or not the `DefinitionTooltip` should open on hover or not",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "renderTrigger": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Custom render function for the trigger element.\nReceives (props, children, isOpen, setOpen) as arguments.\nIf provided, this takes precedence over the `as` prop.",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "triggerClassName": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "The CSS class name of the trigger element",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "children": {
      "description": "The `children` prop will be used as the value that is being defined",
      "type": {
        "name": "node"
      },
      "required": true
    },
    "definition": {
      "description": "The `definition` prop is used as the content inside of the tooltip that\nappears when a user interacts with the element rendered by the `children`\nprop",
      "type": {
        "name": "node"
      },
      "required": true
    }
  }
};

// Made with Bob

exports.DefinitionTooltip = DefinitionTooltip;
exports.default = DefinitionTooltip;
