'use strict';

var _extends = require('@babel/runtime/helpers/extends');
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.array.concat.js');
require('core-js/modules/es.string.bold.js');
require('core-js/modules/es.string.italics.js');
var React = require('react');
var classnames = require('classnames');
var react = require('@carbon/react');
var themes = require('@carbon/themes');
var Settings = require('../../constants/Settings.js');
var componentUtilityFunctions = require('../../utils/componentUtilityFunctions.js');
var SharedPropTypes = require('../../constants/SharedPropTypes.js');
var useSizeObserver = require('../../hooks/useSizeObserver.js');
var CardIcon = require('./CardIcon.js');

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

var _extends__default = /*#__PURE__*/_interopDefault(_extends);
var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
var React__default = /*#__PURE__*/_interopDefault(React);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);

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.settings.iotPrefix;
var ui01 = themes.g10.ui01,
  text01 = themes.g10.text01,
  ui03 = themes.g10.ui03;
var propTypes = SharedPropTypes.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__default.default(_ref, _excluded);
  var _useSizeObserver = useSizeObserver(),
    _useSizeObserver2 = _slicedToArray__default.default(_useSizeObserver, 2),
    containerSize = _useSizeObserver2[0],
    containerRef = _useSizeObserver2[1];
  var defaultIcon = /*#__PURE__*/React__default.default.createElement("svg", {
    width: width,
    height: height
  }, /*#__PURE__*/React__default.default.createElement("circle", {
    cx: width / 2,
    cy: height / 2,
    r: width / 2 - 1,
    stroke: "white",
    strokeWidth: "2",
    fill: "none",
    opacity: "1"
  }), /*#__PURE__*/React__default.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.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 = componentUtilityFunctions.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.default.createElement("div", {
    ref: containerRef,
    "data-testid": id,
    style: {
      '--x-pos': x,
      '--y-pos': y,
      '--width': containerWidth,
      '--height': containerHeight,
      '--svg-color': color
    },
    className: classnames__default.default("".concat(iotPrefix, "--hotspot-container"), _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, "".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.default.createElement(react.Toggletip, _extends__default.default({}, others, {
    autoAlign: true,
    onClick: function onClick(evt) {
      if (evt.type === 'click' && _onClick) {
        _onClick(evt, {
          x: x,
          y: y
        });
      }
    }
  }), /*#__PURE__*/React__default.default.createElement(react.ToggletipButton, null, iconToRender), /*#__PURE__*/React__default.default.createElement(react.ToggletipContent, null, content)) : isTextType ?
  /*#__PURE__*/
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
  React__default.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;

module.exports = Hotspot$1;
