'use strict';

var _extends = require('@babel/runtime/helpers/extends');
var merge = require('../../../node_modules/lodash-es/merge.js');
require('core-js/modules/es.symbol.js');
require('core-js/modules/es.symbol.description.js');
require('core-js/modules/es.array.find.js');
require('core-js/modules/es.object.to-string.js');
var React = require('react');
var PropTypes = require('prop-types');
var react = require('@carbon/react');
var Dropdown = require('../../Dropdown/Dropdown.js');
var Settings = require('../../../constants/Settings.js');
var Button = require('../../Button/Button.js');
var ColorDropdown = require('../../ColorDropdown/ColorDropdown.js');
var SharedPropTypes = require('../../../constants/SharedPropTypes.js');
var componentUtilityFunctions = require('../../../utils/componentUtilityFunctions.js');
var deprecate = require('../../../internal/deprecate.js');
var iconsReact = require('@carbon/icons-react');

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

var _extends__default = /*#__PURE__*/_interopDefault(_extends);
var React__default = /*#__PURE__*/_interopDefault(React);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);

var iotPrefix = Settings.settings.iotPrefix;
var propTypes = {
  /** Array of selectable color objects */
  hotspotIconFillColors: PropTypes__default.default.arrayOf(SharedPropTypes.ColorPropType).isRequired,
  /** Array of selectable icon objects. Use icon size 24 for the icon */
  hotspotIcons: PropTypes__default.default.arrayOf(SharedPropTypes.HotspotIconPropType),
  /** The state values of the controlled form elements e.g. { title: 'My hotspot 1', description: 'Lorem ipsum' } */
  formValues: PropTypes__default.default.shape({
    content: PropTypes__default.default.shape({
      title: PropTypes__default.default.string,
      description: PropTypes__default.default.string
    }),
    /** Can be an icon object or just the name if  there is a matching icon in the hotspotIcons array */
    icon: PropTypes__default.default.oneOfType([PropTypes__default.default.object, PropTypes__default.default.string]),
    /** Can be a colorPropType object or just the carbonColor prop of a colorPropType object */
    color: PropTypes__default.default.oneOfType([SharedPropTypes.ColorPropType, PropTypes__default.default.string])
  }),
  /** Internationalisation strings */
  i18n: PropTypes__default.default.shape({
    deleteButtonLabelText: PropTypes__default.default.string,
    deleteButtonIconDescriptionText: PropTypes__default.default.string,
    titleInputLabelText: PropTypes__default.default.string,
    titleInputPlaceholderText: PropTypes__default.default.string,
    descriptionTextareaLabelText: PropTypes__default.default.string,
    descriptionTextareaPlaceholderText: PropTypes__default.default.string,
    iconDropdownTitleText: PropTypes__default.default.string,
    iconDropdownLabelText: PropTypes__default.default.string,
    colorDropdownLabelText: PropTypes__default.default.string,
    colorDropdownTitleText: PropTypes__default.default.string,
    infoMessageText: PropTypes__default.default.string
  }),
  translateWithId: PropTypes__default.default.func.isRequired,
  /** Callback for when any of the form element's value changes */
  onChange: PropTypes__default.default.func.isRequired,
  /** Callback for when the delete button is clicked */
  onDelete: PropTypes__default.default.func.isRequired,
  /**
   * Used to overide the internal components and props for the text based input
   * if need should arise to manage defaultValue, length or validation etc.
   */
  overrides: PropTypes__default.default.shape({
    titleTextInput: SharedPropTypes.OverridePropTypes,
    decriptionTextArea: SharedPropTypes.OverridePropTypes
  }),
  /** The id of the form elememt that should be initially focused */
  primaryInputId: PropTypes__default.default.string,
  /** Show the delete hotspot button */
  showDeleteButton: PropTypes__default.default.bool,
  /** Shows the info message if true */
  showInfoMessage: PropTypes__default.default.bool,
  // eslint-disable-next-line react/require-default-props
  testID: deprecate(PropTypes__default.default.string, "The 'testID' prop has been deprecated. Please use 'testId' instead."),
  /** Id that can be used for testing */
  testId: PropTypes__default.default.string
};
var defaultProps = {
  hotspotIcons: [],
  formValues: {},
  i18n: {
    deleteButtonLabelText: 'Delete hotspot',
    deleteButtonIconDescriptionText: 'Delete this hotspot',
    titleInputLabelText: 'Title',
    titleInputPlaceholderText: 'Enter title for the tooltip',
    descriptionTextareaLabelText: 'Description',
    descriptionTextareaPlaceholderText: 'Enter description for the tooltip',
    iconDropdownLabelText: 'Select an icon',
    iconDropdownTitleText: 'Icon',
    infoMessageText: 'Hold the CTRL key and click a position on the image to add a hotspot, or set the X and Y coordinates using dataitems and create hotspots at those positions.',
    colorDropdownLabelText: 'Select a color',
    colorDropdownTitleText: 'Color'
  },
  overrides: undefined,
  primaryInputId: undefined,
  showInfoMessage: false,
  showDeleteButton: true,
  testId: 'HotspotEditorTooltipTab'
};
var preventFormSubmission = function preventFormSubmission(e) {
  return e.preventDefault();
};
var getSelectedColorItem = function getSelectedColorItem(color, hotspotIconFillColors) {
  return typeof color === 'string' && Array.isArray(hotspotIconFillColors) ? hotspotIconFillColors.find(function (colorObj) {
    return colorObj.carbonColor === color;
  }) : color;
};
var getSelectedIconItem = function getSelectedIconItem(icon, hotspotIcons) {
  return typeof icon === 'string' && hotspotIcons.length ? hotspotIcons.find(function (iconObj) {
    return iconObj.id === icon;
  }) : icon;
};

/**
 * This component renders a form for editing the tooltip settings of an existing Hotspot.
 * The title, description, icon and color of this tooltip foor this hotspot
 */
var HotspotEditorTooltipTab = function HotspotEditorTooltipTab(_ref) {
  var _ref2, _formValues$color$car, _formValues$color, _overrides$titleTextI, _overrides$decription, _formValues$content, _overrides$titleTextI2, _formValues$content2, _overrides$decription2;
  var hotspotIcons = _ref.hotspotIcons,
    hotspotIconFillColors = _ref.hotspotIconFillColors,
    formValues = _ref.formValues,
    i18n = _ref.i18n,
    primaryInputId = _ref.primaryInputId,
    _onChange = _ref.onChange,
    onDelete = _ref.onDelete,
    overrides = _ref.overrides,
    showInfoMessage = _ref.showInfoMessage,
    showDeleteButton = _ref.showDeleteButton,
    testID = _ref.testID,
    testId = _ref.testId,
    translateWithId = _ref.translateWithId;
  var _merge2 = merge({}, defaultProps.i18n, i18n),
    deleteButtonLabelText = _merge2.deleteButtonLabelText,
    deleteButtonIconDescriptionText = _merge2.deleteButtonIconDescriptionText,
    titleInputLabelText = _merge2.titleInputLabelText,
    titleInputPlaceholderText = _merge2.titleInputPlaceholderText,
    descriptionTextareaLabelText = _merge2.descriptionTextareaLabelText,
    descriptionTextareaPlaceholderText = _merge2.descriptionTextareaPlaceholderText,
    iconDropdownLabelText = _merge2.iconDropdownLabelText,
    iconDropdownTitleText = _merge2.iconDropdownTitleText,
    infoMessageText = _merge2.infoMessageText,
    colorDropdownLabelText = _merge2.colorDropdownLabelText,
    colorDropdownTitleText = _merge2.colorDropdownTitleText;
  var currentIconColor = (_ref2 = (_formValues$color$car = (_formValues$color = formValues.color) === null || _formValues$color === void 0 ? void 0 : _formValues$color.carbonColor) !== null && _formValues$color$car !== void 0 ? _formValues$color$car : formValues.color) !== null && _ref2 !== void 0 ? _ref2 : 'currentcolor';
  var hasNonEditableContent = /*#__PURE__*/React__default.default.isValidElement(formValues === null || formValues === void 0 ? void 0 : formValues.content);
  var renderInfoMessage = function renderInfoMessage() {
    return /*#__PURE__*/React__default.default.createElement("div", {
      className: "".concat(iotPrefix, "--hotspot-editor--tooltip-info-message")
    }, /*#__PURE__*/React__default.default.createElement(iconsReact.InformationFilled, {
      size: 24
    }), /*#__PURE__*/React__default.default.createElement("p", null, infoMessageText));
  };
  var renderColorIconContainer = function renderColorIconContainer() {
    var _formValues$icon$id, _formValues$icon;
    return /*#__PURE__*/React__default.default.createElement("div", {
      className: "".concat(iotPrefix, "--icon-color-container"),
      style: {
        '--icon-fill-color': currentIconColor
      }
    }, /*#__PURE__*/React__default.default.createElement(Dropdown, {
      key: (_formValues$icon$id = (_formValues$icon = formValues.icon) === null || _formValues$icon === void 0 ? void 0 : _formValues$icon.id) !== null && _formValues$icon$id !== void 0 ? _formValues$icon$id : formValues.icon,
      id: "tooltip-form-icon",
      items: hotspotIcons,
      label: iconDropdownLabelText,
      light: true,
      onChange: function onChange(change) {
        _onChange({
          icon: change.selectedItem.id
        });
      },
      selectedItem: getSelectedIconItem(formValues === null || formValues === void 0 ? void 0 : formValues.icon, hotspotIcons),
      titleText: iconDropdownTitleText,
      type: "default",
      translateWithId: translateWithId
    }), /*#__PURE__*/React__default.default.createElement(ColorDropdown, {
      key: currentIconColor // Neded to update the selectedColor after initial render
      ,
      selectedColor: getSelectedColorItem(formValues.color, hotspotIconFillColors),
      id: "tooltip-form-color",
      colors: hotspotIconFillColors,
      label: colorDropdownLabelText,
      light: true,
      onChange: function onChange(selectedColorItem) {
        var _selectedColorItem$co;
        _onChange({
          color: (_selectedColorItem$co = selectedColorItem.color) === null || _selectedColorItem$co === void 0 ? void 0 : _selectedColorItem$co.carbonColor
        });
      },
      titleText: colorDropdownTitleText,
      translateWithId: translateWithId
    }));
  };
  var MyTitleTextInput = (overrides === null || overrides === void 0 || (_overrides$titleTextI = overrides.titleTextInput) === null || _overrides$titleTextI === void 0 ? void 0 : _overrides$titleTextI.component) || react.TextInput;
  var MyDecriptionTextArea = (overrides === null || overrides === void 0 || (_overrides$decription = overrides.decriptionTextArea) === null || _overrides$decription === void 0 ? void 0 : _overrides$decription.component) || react.TextArea;
  return /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(iotPrefix, "--hotspot-editor-tooltip-tab")
  }, showInfoMessage ? renderInfoMessage() : /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("form", {
    className: "".concat(iotPrefix, "--hotspot-editor--tooltip-form"),
    "data-testid": testID || testId,
    onSubmit: preventFormSubmission
  }, /*#__PURE__*/React__default.default.createElement(MyTitleTextInput, _extends__default.default({
    disabled: hasNonEditableContent,
    name: "title",
    "data-testid": "".concat(testID || testId, "-title-input"),
    value: ((_formValues$content = formValues.content) === null || _formValues$content === void 0 ? void 0 : _formValues$content.title) || '',
    id: primaryInputId || 'tooltip-form-title',
    labelText: titleInputLabelText,
    light: true,
    onChange: function onChange(evt) {
      _onChange({
        content: {
          title: evt.target.value
        }
      });
    },
    placeholder: titleInputPlaceholderText,
    type: "text"
  }, componentUtilityFunctions.getOverrides(overrides === null || overrides === void 0 || (_overrides$titleTextI2 = overrides.titleTextInput) === null || _overrides$titleTextI2 === void 0 ? void 0 : _overrides$titleTextI2.props))), /*#__PURE__*/React__default.default.createElement(MyDecriptionTextArea, _extends__default.default({
    disabled: hasNonEditableContent,
    name: "description",
    id: "tooltip-form-description",
    labelText: descriptionTextareaLabelText,
    light: true,
    onChange: function onChange(evt) {
      _onChange({
        content: {
          description: evt.target.value
        }
      });
    },
    placeholder: descriptionTextareaPlaceholderText,
    value: ((_formValues$content2 = formValues.content) === null || _formValues$content2 === void 0 ? void 0 : _formValues$content2.description) || ''
  }, componentUtilityFunctions.getOverrides(overrides === null || overrides === void 0 || (_overrides$decription2 = overrides.decriptionTextArea) === null || _overrides$decription2 === void 0 ? void 0 : _overrides$decription2.props))), renderColorIconContainer()), showDeleteButton ? /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(iotPrefix, "--hotspot-editor-tooltip-tab__delete-button-container")
  }, /*#__PURE__*/React__default.default.createElement(Button, {
    kind: "ghost",
    renderIcon: function renderIcon(props) {
      return /*#__PURE__*/React__default.default.createElement(iconsReact.TrashCan, _extends__default.default({
        size: 32
      }, props));
    },
    iconDescription: deleteButtonIconDescriptionText,
    onClick: onDelete
  }, deleteButtonLabelText)) : null));
};
HotspotEditorTooltipTab.propTypes = propTypes;
HotspotEditorTooltipTab.defaultProps = defaultProps;
HotspotEditorTooltipTab.__docgenInfo = {
  "description": "This component renders a form for editing the tooltip settings of an existing Hotspot.\nThe title, description, icon and color of this tooltip foor this hotspot",
  "methods": [],
  "displayName": "HotspotEditorTooltipTab",
  "props": {
    "hotspotIcons": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "Array of selectable icon objects. Use icon size 24 for the icon",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "custom",
          "raw": "HotspotIconPropType"
        }
      },
      "required": false
    },
    "formValues": {
      "defaultValue": {
        "value": "{}",
        "computed": false
      },
      "description": "The state values of the controlled form elements e.g. { title: 'My hotspot 1', description: 'Lorem ipsum' }",
      "type": {
        "name": "shape",
        "value": {
          "content": {
            "name": "shape",
            "value": {
              "title": {
                "name": "string",
                "required": false
              },
              "description": {
                "name": "string",
                "required": false
              }
            },
            "required": false
          },
          "icon": {
            "name": "union",
            "value": [{
              "name": "object"
            }, {
              "name": "string"
            }],
            "description": "Can be an icon object or just the name if  there is a matching icon in the hotspotIcons array",
            "required": false
          },
          "color": {
            "name": "union",
            "value": [{
              "name": "custom",
              "raw": "ColorPropType"
            }, {
              "name": "string"
            }],
            "description": "Can be a colorPropType object or just the carbonColor prop of a colorPropType object",
            "required": false
          }
        }
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  deleteButtonLabelText: 'Delete hotspot',\n  deleteButtonIconDescriptionText: 'Delete this hotspot',\n  titleInputLabelText: 'Title',\n  titleInputPlaceholderText: 'Enter title for the tooltip',\n  descriptionTextareaLabelText: 'Description',\n  descriptionTextareaPlaceholderText: 'Enter description for the tooltip',\n  iconDropdownLabelText: 'Select an icon',\n  iconDropdownTitleText: 'Icon',\n  infoMessageText:\n    'Hold the CTRL key and click a position on the image to add a hotspot, or set the X and Y coordinates using dataitems and create hotspots at those positions.',\n  colorDropdownLabelText: 'Select a color',\n  colorDropdownTitleText: 'Color',\n}",
        "computed": false
      },
      "description": "Internationalisation strings",
      "type": {
        "name": "shape",
        "value": {
          "deleteButtonLabelText": {
            "name": "string",
            "required": false
          },
          "deleteButtonIconDescriptionText": {
            "name": "string",
            "required": false
          },
          "titleInputLabelText": {
            "name": "string",
            "required": false
          },
          "titleInputPlaceholderText": {
            "name": "string",
            "required": false
          },
          "descriptionTextareaLabelText": {
            "name": "string",
            "required": false
          },
          "descriptionTextareaPlaceholderText": {
            "name": "string",
            "required": false
          },
          "iconDropdownTitleText": {
            "name": "string",
            "required": false
          },
          "iconDropdownLabelText": {
            "name": "string",
            "required": false
          },
          "colorDropdownLabelText": {
            "name": "string",
            "required": false
          },
          "colorDropdownTitleText": {
            "name": "string",
            "required": false
          },
          "infoMessageText": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "overrides": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Used to overide the internal components and props for the text based input\nif need should arise to manage defaultValue, length or validation etc.",
      "type": {
        "name": "shape",
        "value": {
          "titleTextInput": {
            "name": "custom",
            "raw": "OverridePropTypes",
            "required": false
          },
          "decriptionTextArea": {
            "name": "custom",
            "raw": "OverridePropTypes",
            "required": false
          }
        }
      },
      "required": false
    },
    "primaryInputId": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "The id of the form elememt that should be initially focused",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "showInfoMessage": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Shows the info message if true",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "showDeleteButton": {
      "defaultValue": {
        "value": "true",
        "computed": false
      },
      "description": "Show the delete hotspot button",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'HotspotEditorTooltipTab'",
        "computed": false
      },
      "description": "Id that can be used for testing",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "hotspotIconFillColors": {
      "description": "Array of selectable color objects",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "custom",
          "raw": "ColorPropType"
        }
      },
      "required": true
    },
    "translateWithId": {
      "description": "",
      "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
    },
    "testID": {
      "description": "",
      "type": {
        "name": "custom",
        "raw": "deprecate(\n  PropTypes.string,\n  `The 'testID' prop has been deprecated. Please use 'testId' instead.`\n)"
      },
      "required": false
    }
  }
};
var HotspotEditorTooltipTab$1 = HotspotEditorTooltipTab;

module.exports = HotspotEditorTooltipTab$1;
