import _merge from '../../../node_modules/lodash-es/merge.js';
import 'core-js/modules/es.array.concat.js';
import 'core-js/modules/es.array.find.js';
import 'core-js/modules/es.number.constructor.js';
import 'core-js/modules/es.object.to-string.js';
import 'core-js/modules/es.string.bold.js';
import 'core-js/modules/es.string.italics.js';
import React__default from 'react';
import PropTypes from 'prop-types';
import { unstable_FeatureFlags, IconSwitch, NumberInput } from '@carbon/react';
import { settings } from '../../../constants/Settings.js';
import ColorDropdown from '../../ColorDropdown/ColorDropdown.js';
import Button from '../../Button/Button.js';
import { isNumberValidForMinMax } from '../../../utils/componentUtilityFunctions.js';
import { TextBold, TextItalic, TextUnderline, TrashCan, InformationFilled } from '@carbon/icons-react';

var iotPrefix = settings.iotPrefix,
  prefix = settings.prefix;
var colorPropType = PropTypes.shape({
  carbonColor: PropTypes.string,
  name: PropTypes.string
});
var propTypes = {
  /** Specify an optional className to be applied to the container node */
  className: PropTypes.string,
  /** True if the light theme is to be used, defaults to true */
  light: PropTypes.bool,
  /** set of internationalized labels */
  i18n: PropTypes.shape({
    boldLabelText: PropTypes.string,
    infoMessageText: PropTypes.string,
    italicLabelText: PropTypes.string,
    underlineLabelText: PropTypes.string,
    fontColorLabelText: PropTypes.string,
    fontSizeLabelText: PropTypes.string,
    fontSizeInvalidText: PropTypes.string,
    backgroundLabelText: PropTypes.string,
    fillOpacityLabelText: PropTypes.string,
    fillOpacityInvalidText: PropTypes.string,
    borderLabelText: PropTypes.string,
    borderWidthLabelText: PropTypes.string,
    borderWidthInvalidText: PropTypes.string,
    deleteButtonLabelText: PropTypes.string,
    deleteButtonIconDescription: PropTypes.string,
    selectAColor: PropTypes.string
  }),
  /** Callback i18n function for translating ListBoxMenuIcon SVG title in the MultiSelect component */
  translateWithId: PropTypes.func.isRequired,
  /** Callback for when any of the form element's value changes */
  onChange: PropTypes.func.isRequired,
  /** Callback for when the delete button is clicked */
  onDelete: PropTypes.func.isRequired,
  /** The state values of the controlled form elements */
  formValues: PropTypes.shape({
    bold: PropTypes.bool,
    italic: PropTypes.bool,
    underline: PropTypes.bool,
    content: PropTypes.oneOfType([PropTypes.node, PropTypes.shape({
      title: PropTypes.string,
      description: PropTypes.string,
      attributes: PropTypes.arrayOf(PropTypes.shape({
        dataItemId: PropTypes.string,
        dataSourceId: PropTypes.string,
        label: PropTypes.string,
        precision: PropTypes.number
      }))
    })]),
    fontColor: PropTypes.oneOfType([PropTypes.string, colorPropType]),
    fontSize: PropTypes.number,
    backgroundColor: PropTypes.oneOfType([PropTypes.string, colorPropType]),
    backgroundOpacity: PropTypes.number,
    borderColor: PropTypes.oneOfType([PropTypes.string, colorPropType]),
    borderWidth: PropTypes.number
  }),
  /** Array of colors to be shown for the font colors dropdown */
  fontColors: PropTypes.arrayOf(colorPropType),
  /** Array of colors to be shown for the background colors dropdown */
  backgroundColors: PropTypes.arrayOf(colorPropType),
  /** Array of colors to be shown for the border colors dropdown */
  borderColors: PropTypes.arrayOf(colorPropType),
  /** Minimum Font size */
  minFontSize: PropTypes.number,
  /** Maximum Font size */
  maxFontSize: PropTypes.number,
  /** Minimum Opacity Value */
  minOpacity: PropTypes.number,
  /** Maximum Opacity Value */
  maxOpacity: PropTypes.number,
  /** Minimum Border Width */
  minBorderWidth: PropTypes.number,
  /** Maximum Border Width */
  maxBorderWidth: PropTypes.number,
  /** Set to true to hide all form elements and show the info message */
  showInfoMessage: PropTypes.bool
};
var defaultProps = {
  className: '',
  light: true,
  i18n: {
    boldLabelText: 'Text Bold',
    infoMessageText: 'Select an existing label on the image to edit it or hold the CTRL key and click on an empty region to create one',
    italicLabelText: 'Text Italic',
    underlineLabelText: 'Text Underline',
    fontColorLabelText: 'Font color',
    fontSizeLabelText: 'Font Size',
    fontSizeInvalidText: 'Font Size is invalid',
    backgroundLabelText: 'Background',
    fillOpacityLabelText: 'Fill Opacity',
    fillOpacityInvalidText: 'Fill Opacity is invalid',
    borderLabelText: 'Border',
    borderWidthLabelText: 'Border Width',
    borderWidthInvalidText: 'Border Width is invalid',
    deleteButtonLabelText: 'Delete hotspot',
    deleteButtonIconDescription: 'Delete this hotspot'
  },
  formValues: {
    bold: false,
    italic: false,
    underline: false,
    fontColor: undefined,
    fontSize: undefined,
    backgroundColor: undefined,
    backgroundOpacity: undefined,
    borderColor: undefined,
    borderWidth: undefined
  },
  fontColors: undefined,
  backgroundColors: undefined,
  borderColors: undefined,
  minFontSize: undefined,
  maxFontSize: undefined,
  minOpacity: undefined,
  maxOpacity: undefined,
  minBorderWidth: undefined,
  maxBorderWidth: undefined,
  showInfoMessage: false
};
var getSelectedColorItem = function getSelectedColorItem(color, colorCollection) {
  return typeof color === 'string' && Array.isArray(colorCollection) ? colorCollection.find(function (colorObj) {
    return colorObj.carbonColor === color;
  }) : color;
};
var preventFormSubmission = function preventFormSubmission(e) {
  return e.preventDefault();
};

/**
 * This component renders a form that allows the user to change the style of the text type hotspots
 */
var HotspotTextStyleTab = function HotspotTextStyleTab(_ref) {
  var _fontColor$carbonColo, _backgroundColor$carb, _borderColor$carbonCo;
  var className = _ref.className,
    fontColors = _ref.fontColors,
    backgroundColors = _ref.backgroundColors,
    borderColors = _ref.borderColors,
    formValues = _ref.formValues,
    light = _ref.light,
    i18n = _ref.i18n,
    _onChange = _ref.onChange,
    onDelete = _ref.onDelete,
    minFontSize = _ref.minFontSize,
    maxFontSize = _ref.maxFontSize,
    minOpacity = _ref.minOpacity,
    maxOpacity = _ref.maxOpacity,
    minBorderWidth = _ref.minBorderWidth,
    maxBorderWidth = _ref.maxBorderWidth,
    showInfoMessage = _ref.showInfoMessage,
    translateWithId = _ref.translateWithId;
  var _merge2 = _merge({}, defaultProps.i18n, i18n),
    boldLabelText = _merge2.boldLabelText,
    infoMessageText = _merge2.infoMessageText,
    italicLabelText = _merge2.italicLabelText,
    underlineLabelText = _merge2.underlineLabelText,
    fontColorLabelText = _merge2.fontColorLabelText,
    fontSizeLabelText = _merge2.fontSizeLabelText,
    fontSizeInvalidText = _merge2.fontSizeInvalidText,
    backgroundLabelText = _merge2.backgroundLabelText,
    fillOpacityLabelText = _merge2.fillOpacityLabelText,
    fillOpacityInvalidText = _merge2.fillOpacityInvalidText,
    borderLabelText = _merge2.borderLabelText,
    borderWidthLabelText = _merge2.borderWidthLabelText,
    borderWidthInvalidText = _merge2.borderWidthInvalidText,
    deleteButtonLabelText = _merge2.deleteButtonLabelText,
    deleteButtonIconDescription = _merge2.deleteButtonIconDescription,
    selectAColor = _merge2.selectAColor;
  var bold = formValues.bold,
    italic = formValues.italic,
    underline = formValues.underline,
    fontSize = formValues.fontSize,
    fontColor = formValues.fontColor,
    backgroundColor = formValues.backgroundColor,
    backgroundOpacity = formValues.backgroundOpacity,
    borderColor = formValues.borderColor,
    borderWidth = formValues.borderWidth;
  var hasNonEditableContent = /*#__PURE__*/React__default.isValidElement(formValues === null || formValues === void 0 ? void 0 : formValues.content);
  var renderInfoMessage = function renderInfoMessage() {
    return /*#__PURE__*/React__default.createElement("div", {
      className: "".concat(iotPrefix, "--hotspot-editor--text-info-message")
    }, /*#__PURE__*/React__default.createElement(InformationFilled, {
      size: 24
    }), /*#__PURE__*/React__default.createElement("p", null, infoMessageText));
  };
  return /*#__PURE__*/React__default.createElement("div", {
    className: className
  }, showInfoMessage ? renderInfoMessage() : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("form", {
    onSubmit: preventFormSubmission,
    className: "".concat(iotPrefix, "--hotspot-text-style-tab__form")
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(iotPrefix, "--hotspot-text-style-tab__row")
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(prefix, "--content-switcher ").concat(prefix, "--content-switcher--icon-only")
  }, /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
    enableV12DynamicFloatingStyles: true
  }, /*#__PURE__*/React__default.createElement(IconSwitch, {
    disabled: hasNonEditableContent,
    onClick: function onClick() {
      return _onChange({
        bold: !bold
      });
    },
    "data-testid": "hotspot-bold",
    selected: bold,
    text: boldLabelText,
    renderIcon: TextBold,
    index: 0,
    light: light
  }), /*#__PURE__*/React__default.createElement(IconSwitch, {
    disabled: hasNonEditableContent,
    name: "italic",
    onClick: function onClick() {
      return _onChange({
        italic: !italic
      });
    },
    "data-testid": "hotspot-italic",
    selected: italic,
    text: italicLabelText,
    renderIcon: TextItalic,
    index: 1,
    light: light
  }), /*#__PURE__*/React__default.createElement(IconSwitch, {
    disabled: hasNonEditableContent,
    name: "underline",
    onClick: function onClick() {
      return _onChange({
        underline: !underline
      });
    },
    "data-testid": "hotspot-underline",
    selected: underline,
    text: underlineLabelText,
    renderIcon: TextUnderline,
    index: 2,
    light: light
  })))), /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(iotPrefix, "--hotspot-text-style-tab__row")
  }, /*#__PURE__*/React__default.createElement(ColorDropdown, {
    disabled: hasNonEditableContent,
    key: (_fontColor$carbonColo = fontColor === null || fontColor === void 0 ? void 0 : fontColor.carbonColor) !== null && _fontColor$carbonColo !== void 0 ? _fontColor$carbonColo : fontColor,
    id: "".concat(iotPrefix, "--hotspot-text-style-tab__font-color"),
    titleText: fontColorLabelText,
    light: light,
    label: selectAColor,
    selectedColor: getSelectedColorItem(fontColor, fontColors),
    colors: fontColors,
    onChange: function onChange(selected) {
      _onChange({
        fontColor: selected.color.carbonColor
      });
    },
    translateWithId: translateWithId
  }), /*#__PURE__*/React__default.createElement(NumberInput, {
    disabled: hasNonEditableContent,
    allowEmpty: true,
    id: "".concat(iotPrefix, "--hotspot-text-style-tab__font-size"),
    min: minFontSize,
    max: maxFontSize,
    value: fontSize,
    step: 1,
    label: fontSizeLabelText,
    invalidText: fontSizeInvalidText,
    onChange: function onChange(event, _ref2) {
      var value = _ref2.value;
      var parsedValue = Number(value !== null && value !== void 0 ? value : event.imaginaryTarget.value);
      if (isNumberValidForMinMax(parsedValue, minFontSize, maxFontSize)) {
        _onChange({
          fontSize: parsedValue
        });
      }
    }
  })), /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(iotPrefix, "--hotspot-text-style-tab__row")
  }, /*#__PURE__*/React__default.createElement(ColorDropdown, {
    key: (_backgroundColor$carb = backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.carbonColor) !== null && _backgroundColor$carb !== void 0 ? _backgroundColor$carb : backgroundColor,
    id: "".concat(iotPrefix, "--hotspot-text-style-tab__background-color"),
    titleText: backgroundLabelText,
    light: light,
    label: selectAColor,
    selectedColor: getSelectedColorItem(backgroundColor, backgroundColors),
    colors: backgroundColors,
    onChange: function onChange(selected) {
      _onChange({
        backgroundColor: selected.color.carbonColor
      });
    },
    translateWithId: translateWithId
  }), /*#__PURE__*/React__default.createElement(NumberInput, {
    id: "".concat(iotPrefix, "--hotspot-text-style-tab__background"),
    label: fillOpacityLabelText,
    min: minOpacity,
    max: maxOpacity,
    value: backgroundOpacity,
    step: 1,
    light: light,
    invalidText: fillOpacityInvalidText,
    onChange: function onChange(event, _ref3) {
      var value = _ref3.value;
      var parsedValue = Number(value !== null && value !== void 0 ? value : event.imaginaryTarget.value);
      if (isNumberValidForMinMax(parsedValue, minOpacity, maxOpacity)) {
        _onChange({
          backgroundOpacity: parsedValue
        });
      }
    }
  })), /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(iotPrefix, "--hotspot-text-style-tab__row")
  }, /*#__PURE__*/React__default.createElement(ColorDropdown, {
    key: (_borderColor$carbonCo = borderColor === null || borderColor === void 0 ? void 0 : borderColor.carbonColor) !== null && _borderColor$carbonCo !== void 0 ? _borderColor$carbonCo : borderColor,
    id: "".concat(iotPrefix, "--hotspot-text-style-tab__border-color"),
    titleText: borderLabelText,
    light: light,
    label: i18n.selectAColor,
    colors: borderColors,
    onChange: function onChange(selected) {
      _onChange({
        borderColor: selected.color.carbonColor
      });
    },
    translateWithId: translateWithId,
    selectedColor: getSelectedColorItem(borderColor, borderColors)
  }), /*#__PURE__*/React__default.createElement(NumberInput, {
    id: "".concat(iotPrefix, "--hotspot-text-style-tab__border"),
    label: borderWidthLabelText,
    min: minBorderWidth,
    max: maxBorderWidth,
    value: borderWidth,
    step: 1,
    light: light,
    invalidText: borderWidthInvalidText,
    onChange: function onChange(event, _ref4) {
      var value = _ref4.value;
      var parsedValue = Number(value !== null && value !== void 0 ? value : event.imaginaryTarget.value);
      if (isNumberValidForMinMax(parsedValue, minBorderWidth, maxBorderWidth)) {
        _onChange({
          borderWidth: parsedValue
        });
      }
    }
  }))), /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(iotPrefix, "--hotspot-text-style-tab__delete-button-container")
  }, /*#__PURE__*/React__default.createElement(Button, {
    kind: "ghost",
    renderIcon: TrashCan,
    iconDescription: deleteButtonIconDescription,
    onClick: onDelete
  }, deleteButtonLabelText))));
};
HotspotTextStyleTab.propTypes = propTypes;
HotspotTextStyleTab.defaultProps = defaultProps;
HotspotTextStyleTab.__docgenInfo = {
  "description": "This component renders a form that allows the user to change the style of the text type hotspots",
  "methods": [],
  "displayName": "HotspotTextStyleTab",
  "props": {
    "className": {
      "defaultValue": {
        "value": "''",
        "computed": false
      },
      "description": "Specify an optional className to be applied to the container node",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "light": {
      "defaultValue": {
        "value": "true",
        "computed": false
      },
      "description": "True if the light theme is to be used, defaults to true",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  boldLabelText: 'Text Bold',\n  infoMessageText:\n    'Select an existing label on the image to edit it or hold the CTRL key and click on an empty region to create one',\n  italicLabelText: 'Text Italic',\n  underlineLabelText: 'Text Underline',\n  fontColorLabelText: 'Font color',\n  fontSizeLabelText: 'Font Size',\n  fontSizeInvalidText: 'Font Size is invalid',\n  backgroundLabelText: 'Background',\n  fillOpacityLabelText: 'Fill Opacity',\n  fillOpacityInvalidText: 'Fill Opacity is invalid',\n  borderLabelText: 'Border',\n  borderWidthLabelText: 'Border Width',\n  borderWidthInvalidText: 'Border Width is invalid',\n  deleteButtonLabelText: 'Delete hotspot',\n  deleteButtonIconDescription: 'Delete this hotspot',\n}",
        "computed": false
      },
      "description": "set of internationalized labels",
      "type": {
        "name": "shape",
        "value": {
          "boldLabelText": {
            "name": "string",
            "required": false
          },
          "infoMessageText": {
            "name": "string",
            "required": false
          },
          "italicLabelText": {
            "name": "string",
            "required": false
          },
          "underlineLabelText": {
            "name": "string",
            "required": false
          },
          "fontColorLabelText": {
            "name": "string",
            "required": false
          },
          "fontSizeLabelText": {
            "name": "string",
            "required": false
          },
          "fontSizeInvalidText": {
            "name": "string",
            "required": false
          },
          "backgroundLabelText": {
            "name": "string",
            "required": false
          },
          "fillOpacityLabelText": {
            "name": "string",
            "required": false
          },
          "fillOpacityInvalidText": {
            "name": "string",
            "required": false
          },
          "borderLabelText": {
            "name": "string",
            "required": false
          },
          "borderWidthLabelText": {
            "name": "string",
            "required": false
          },
          "borderWidthInvalidText": {
            "name": "string",
            "required": false
          },
          "deleteButtonLabelText": {
            "name": "string",
            "required": false
          },
          "deleteButtonIconDescription": {
            "name": "string",
            "required": false
          },
          "selectAColor": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "formValues": {
      "defaultValue": {
        "value": "{\n  bold: false,\n  italic: false,\n  underline: false,\n  fontColor: undefined,\n  fontSize: undefined,\n  backgroundColor: undefined,\n  backgroundOpacity: undefined,\n  borderColor: undefined,\n  borderWidth: undefined,\n}",
        "computed": false
      },
      "description": "The state values of the controlled form elements",
      "type": {
        "name": "shape",
        "value": {
          "bold": {
            "name": "bool",
            "required": false
          },
          "italic": {
            "name": "bool",
            "required": false
          },
          "underline": {
            "name": "bool",
            "required": false
          },
          "content": {
            "name": "union",
            "value": [{
              "name": "node"
            }, {
              "name": "shape",
              "value": {
                "title": {
                  "name": "string",
                  "required": false
                },
                "description": {
                  "name": "string",
                  "required": false
                },
                "attributes": {
                  "name": "arrayOf",
                  "value": {
                    "name": "shape",
                    "value": {
                      "dataItemId": {
                        "name": "string",
                        "required": false
                      },
                      "dataSourceId": {
                        "name": "string",
                        "required": false
                      },
                      "label": {
                        "name": "string",
                        "required": false
                      },
                      "precision": {
                        "name": "number",
                        "required": false
                      }
                    }
                  },
                  "required": false
                }
              }
            }],
            "required": false
          },
          "fontColor": {
            "name": "union",
            "value": [{
              "name": "string"
            }, {
              "name": "custom",
              "raw": "colorPropType"
            }],
            "required": false
          },
          "fontSize": {
            "name": "number",
            "required": false
          },
          "backgroundColor": {
            "name": "union",
            "value": [{
              "name": "string"
            }, {
              "name": "custom",
              "raw": "colorPropType"
            }],
            "required": false
          },
          "backgroundOpacity": {
            "name": "number",
            "required": false
          },
          "borderColor": {
            "name": "union",
            "value": [{
              "name": "string"
            }, {
              "name": "custom",
              "raw": "colorPropType"
            }],
            "required": false
          },
          "borderWidth": {
            "name": "number",
            "required": false
          }
        }
      },
      "required": false
    },
    "fontColors": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Array of colors to be shown for the font colors dropdown",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "custom",
          "raw": "colorPropType"
        }
      },
      "required": false
    },
    "backgroundColors": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Array of colors to be shown for the background colors dropdown",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "custom",
          "raw": "colorPropType"
        }
      },
      "required": false
    },
    "borderColors": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Array of colors to be shown for the border colors dropdown",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "custom",
          "raw": "colorPropType"
        }
      },
      "required": false
    },
    "minFontSize": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Minimum Font size",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "maxFontSize": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Maximum Font size",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "minOpacity": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Minimum Opacity Value",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "maxOpacity": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Maximum Opacity Value",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "minBorderWidth": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Minimum Border Width",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "maxBorderWidth": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Maximum Border Width",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "showInfoMessage": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Set to true to hide all form elements and show the info message",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "translateWithId": {
      "description": "Callback i18n function for translating ListBoxMenuIcon SVG title in the MultiSelect component",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "onChange": {
      "description": "Callback for when any of the form element's value changes",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "onDelete": {
      "description": "Callback for when the delete button is clicked",
      "type": {
        "name": "func"
      },
      "required": true
    }
  }
};
var HotspotTextStyleTab$1 = HotspotTextStyleTab;

export { HotspotTextStyleTab$1 as default };
