import _extends from '@babel/runtime/helpers/extends';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import 'core-js/modules/es.array.concat.js';
import 'core-js/modules/es.string.bold.js';
import 'core-js/modules/es.string.italics.js';
import React__default from 'react';
import classnames from 'classnames';
import { Toggletip, ToggletipButton, ToggletipContent } from '@carbon/react';
import { g10 } from '@carbon/themes';
import { settings } from '../../constants/Settings.js';
import { hexToRgb } from '../../utils/componentUtilityFunctions.js';
import { HotspotPropTypes } from '../../constants/SharedPropTypes.js';
import useSizeObserver from '../../hooks/useSizeObserver.js';
import CardIcon from './CardIcon.js';

var _excluded = ["x", "y", "content", "icon", "iconDescription", "color", "width", "height", "renderIconByName", "onClick", "isSelected", "className", "type", "bold", "italic", "underline", "fontColor", "fontSize", "backgroundColor", "backgroundOpacity", "borderColor", "borderWidth"];
var iotPrefix = settings.iotPrefix;
var ui01 = g10.ui01,
  text01 = g10.text01,
  ui03 = g10.ui03;
var propTypes = HotspotPropTypes;
var defaultProps = {
  icon: null,
  iconDescription: '',
  color: 'blue',
  width: 25,
  height: 25,
  renderIconByName: null,
  onClick: null,
  isSelected: false,
  type: 'fixed',
  bold: false,
  italic: false,
  underline: false,
  fontColor: text01,
  fontSize: 14,
  backgroundColor: ui01,
  backgroundOpacity: 100,
  borderColor: ui03,
  borderWidth: 0
};

/**
 * This component renders a hotspot with content over an image
 */
var Hotspot = function Hotspot(_ref) {
  var x = _ref.x,
    y = _ref.y,
    content = _ref.content,
    icon = _ref.icon,
    iconDescription = _ref.iconDescription,
    color = _ref.color,
    width = _ref.width,
    height = _ref.height,
    renderIconByName = _ref.renderIconByName,
    _onClick = _ref.onClick,
    isSelected = _ref.isSelected;
    _ref.className;
    var type = _ref.type,
    bold = _ref.bold,
    italic = _ref.italic,
    underline = _ref.underline,
    fontColor = _ref.fontColor,
    fontSize = _ref.fontSize,
    backgroundColor = _ref.backgroundColor,
    backgroundOpacity = _ref.backgroundOpacity,
    borderColor = _ref.borderColor,
    borderWidth = _ref.borderWidth,
    others = _objectWithoutProperties(_ref, _excluded);
  var _useSizeObserver = useSizeObserver(),
    _useSizeObserver2 = _slicedToArray(_useSizeObserver, 2),
    containerSize = _useSizeObserver2[0],
    containerRef = _useSizeObserver2[1];
  var defaultIcon = /*#__PURE__*/React__default.createElement("svg", {
    width: width,
    height: height
  }, /*#__PURE__*/React__default.createElement("circle", {
    cx: width / 2,
    cy: height / 2,
    r: width / 2 - 1,
    stroke: "white",
    strokeWidth: "2",
    fill: "none",
    opacity: "1"
  }), /*#__PURE__*/React__default.createElement("circle", {
    cx: width / 2,
    cy: height / 2,
    r: width / 2 - 1,
    stroke: "none",
    fill: color,
    opacity: "0.7"
  }));
  var iconToRender = icon ? /*#__PURE__*/React__default.createElement(CardIcon, {
    icon: icon,
    title: iconDescription,
    color: color,
    width: width,
    height: height,
    renderIconByName: renderIconByName
  }) : defaultIcon;
  var id = "hotspot-".concat(x, "-").concat(y);
  var _hexToRgb = hexToRgb(backgroundColor),
    r = _hexToRgb.r,
    g = _hexToRgb.g,
    b = _hexToRgb.b;
  var opacity = backgroundOpacity / 100;
  var isTextType = type === 'text';
  var containerWidth = isTextType ? containerSize.width : width;
  var containerHeight = isTextType ? containerSize.height : height;
  return /*#__PURE__*/React__default.createElement("div", {
    ref: containerRef,
    "data-testid": id,
    style: {
      '--x-pos': x,
      '--y-pos': y,
      '--width': containerWidth,
      '--height': containerHeight,
      '--svg-color': color
    },
    className: classnames("".concat(iotPrefix, "--hotspot-container"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--hotspot-container--selected"), isSelected), "".concat(iotPrefix, "--hotspot-container--has-icon"), icon), "".concat(iotPrefix, "--hotspot-container--is-text"), isTextType), "".concat(iotPrefix, "--hotspot-container--is-fixed"), type === 'fixed'), "".concat(iotPrefix, "--hotspot-container--is-dynamic"), type === 'dynamic'), "".concat(iotPrefix, "--hotspot-container--toggletip-fill-color"), !!color)),
    icon: icon
  }, type === 'fixed' || type === 'dynamic' ? /*#__PURE__*/React__default.createElement(Toggletip, _extends({}, others, {
    autoAlign: true,
    onClick: function onClick(evt) {
      if (evt.type === 'click' && _onClick) {
        _onClick(evt, {
          x: x,
          y: y
        });
      }
    }
  }), /*#__PURE__*/React__default.createElement(ToggletipButton, null, iconToRender), /*#__PURE__*/React__default.createElement(ToggletipContent, null, content)) : isTextType ?
  /*#__PURE__*/
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
  React__default.createElement("div", {
    role: "complementary",
    style: {
      '--background-color': "rgba( ".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")"),
      '--border-color': borderColor,
      '--border-width': borderWidth,
      '--title-font-weight': bold ? 'bold' : 'normal',
      '--title-font-style': italic ? 'italic' : 'normal',
      '--title-text-decoration-line': underline ? 'underline' : 'none',
      '--title-font-color': fontColor,
      '--title-font-size': fontSize
    },
    className: "".concat(iotPrefix, "--text-hotspot"),
    onClick: function onClick(evt) {
      return _onClick(evt, {
        x: x,
        y: y
      });
    }
  }, content) : null);
};
Hotspot.propTypes = propTypes;
Hotspot.defaultProps = defaultProps;
Hotspot.__docgenInfo = {
  "description": "This component renders a hotspot with content over an image",
  "methods": [],
  "displayName": "Hotspot",
  "props": {
    "icon": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "required": false
    },
    "iconDescription": {
      "defaultValue": {
        "value": "''",
        "computed": false
      },
      "required": false
    },
    "color": {
      "defaultValue": {
        "value": "'blue'",
        "computed": false
      },
      "required": false
    },
    "width": {
      "defaultValue": {
        "value": "25",
        "computed": false
      },
      "required": false
    },
    "height": {
      "defaultValue": {
        "value": "25",
        "computed": false
      },
      "required": false
    },
    "renderIconByName": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "required": false
    },
    "onClick": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "required": false
    },
    "isSelected": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "required": false
    },
    "type": {
      "defaultValue": {
        "value": "'fixed'",
        "computed": false
      },
      "required": false
    },
    "bold": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "required": false
    },
    "italic": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "required": false
    },
    "underline": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "required": false
    },
    "fontColor": {
      "defaultValue": {
        "value": "g10.text01",
        "computed": true
      },
      "required": false
    },
    "fontSize": {
      "defaultValue": {
        "value": "14",
        "computed": false
      },
      "required": false
    },
    "backgroundColor": {
      "defaultValue": {
        "value": "g10.ui01",
        "computed": true
      },
      "required": false
    },
    "backgroundOpacity": {
      "defaultValue": {
        "value": "100",
        "computed": false
      },
      "required": false
    },
    "borderColor": {
      "defaultValue": {
        "value": "g10.ui03",
        "computed": true
      },
      "required": false
    },
    "borderWidth": {
      "defaultValue": {
        "value": "0",
        "computed": false
      },
      "required": false
    }
  },
  "composes": ["../../constants/SharedPropTypes"]
};
var Hotspot$1 = Hotspot;

export { Hotspot$1 as default };
