'use strict';

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/web.dom-collections.for-each.js');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var isEmpty = require('../../../node_modules/lodash-es/isEmpty.js');
var React = require('react');
var PropTypes = require('prop-types');
var react = require('@carbon/react');
var Settings = require('../../../constants/Settings.js');
var Button = require('../../Button/Button.js');
var PageTitleBar = require('../../PageTitleBar/PageTitleBar.js');
var iconsReact = require('@carbon/icons-react');

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

var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
var React__default = /*#__PURE__*/_interopDefault(React);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);

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 iotPrefix = Settings.settings.iotPrefix;
var propTypes = {
  /** Dashboard title */
  title: PropTypes__default.default.node,
  /** initial dashboard data to edit */
  breadcrumbs: PropTypes__default.default.arrayOf(PropTypes__default.default.node),
  /** if provided, renders edit button next to title linked to this callback */
  onEditTitle: PropTypes__default.default.func,
  /** if provided, renders import button linked to this callback
   * onImport(data, setNotification?)
   */
  onImport: PropTypes__default.default.func,
  /** if provided, renders export button linked to this callback
   * onExport(dashboardJson)
   */
  onExport: PropTypes__default.default.func,
  /** if provided, renders delete button linked to this callback */
  onDelete: PropTypes__default.default.func,
  /** If provided, renders cancel button linked to this callback */
  onCancel: PropTypes__default.default.func,
  /** If provided, renders submit button linked to this callback
   * onSubmit(dashboardData)
   */
  onSubmit: PropTypes__default.default.func,
  /** Whether to disable the submit button */
  isSubmitDisabled: PropTypes__default.default.bool,
  /** Whether to set the loading spinner on the submit button */
  isSubmitLoading: PropTypes__default.default.bool,
  /** internationalization strings */
  i18n: PropTypes__default.default.shape({
    headerEditTitleButton: PropTypes__default.default.string,
    headerImportButton: PropTypes__default.default.string,
    headerExportButton: PropTypes__default.default.string,
    headerDeleteButton: PropTypes__default.default.string,
    headerCancelButton: PropTypes__default.default.string,
    headerSubmitButton: PropTypes__default.default.string,
    headerFitToScreenButton: PropTypes__default.default.string,
    headerXlargeButton: PropTypes__default.default.string,
    headerLargeButton: PropTypes__default.default.string,
    headerMediumButton: PropTypes__default.default.string,
    dashboardTitleLabel: PropTypes__default.default.string,
    requiredMessage: PropTypes__default.default.string,
    saveTitleButton: PropTypes__default.default.string
  }),
  /** The current dashboard's JSON */
  dashboardJson: PropTypes__default.default.object.isRequired,
  // eslint-disable-line react/forbid-prop-types
  /** currently selected breakpoint which is being held in state by DashboardEditor */
  selectedBreakpointIndex: PropTypes__default.default.number,
  /** handler to change the selectedBreakpoint state */
  setSelectedBreakpointIndex: PropTypes__default.default.func,
  /** if enabled, renders a ContentSwitcher with IconSwitches that allow for manually changing the breakpoint,
   * regardless of the screen width
   */
  breakpointSwitcher: PropTypes__default.default.shape({
    enabled: PropTypes__default.default.bool,
    allowedBreakpoints: PropTypes__default.default.arrayOf(PropTypes__default.default.string)
  }),
  testId: PropTypes__default.default.string
};
var defaultProps = {
  title: null,
  breadcrumbs: [],
  onEditTitle: null,
  onImport: null,
  onExport: null,
  onDelete: null,
  onCancel: null,
  onSubmit: null,
  isSubmitDisabled: false,
  isSubmitLoading: false,
  i18n: {
    headerEditTitleButton: 'Edit title',
    headerImportButton: 'Import',
    headerExportButton: 'Export',
    headerDeleteButton: 'Delete',
    headerCancelButton: 'Cancel',
    headerSubmitButton: 'Save and close',
    headerFitToScreenButton: 'Fit to screen',
    headerLargeButton: 'Large view',
    headerMediumButton: 'Medium view',
    headerSmallButton: 'Small view',
    dashboardTitleLabel: 'Dashboard title',
    requiredMessage: 'Required',
    saveTitleButton: 'Save title'
  },
  selectedBreakpointIndex: null,
  setSelectedBreakpointIndex: null,
  breakpointSwitcher: null,
  testId: 'dashboard-editor-header'
};
var DashboardEditorHeader = function DashboardEditorHeader(_ref) {
  var title = _ref.title,
    breadcrumbs = _ref.breadcrumbs,
    onEditTitle = _ref.onEditTitle,
    onImport = _ref.onImport,
    onExport = _ref.onExport,
    onDelete = _ref.onDelete,
    onCancel = _ref.onCancel,
    onSubmit = _ref.onSubmit,
    isSubmitDisabled = _ref.isSubmitDisabled,
    isSubmitLoading = _ref.isSubmitLoading,
    i18n = _ref.i18n,
    dashboardJson = _ref.dashboardJson,
    selectedBreakpointIndex = _ref.selectedBreakpointIndex,
    setSelectedBreakpointIndex = _ref.setSelectedBreakpointIndex,
    breakpointSwitcher = _ref.breakpointSwitcher,
    testId = _ref.testId;
  var _useState = React.useState(false),
    _useState2 = _slicedToArray__default.default(_useState, 2),
    isTitleEditMode = _useState2[0],
    setIsTitleEditMode = _useState2[1];
  var _useState3 = React.useState(title),
    _useState4 = _slicedToArray__default.default(_useState3, 2),
    updatedTitle = _useState4[0],
    setUpdatedTitle = _useState4[1];
  var mergedI18n = React.useMemo(function () {
    return _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
  }, [i18n]);
  var baseClassName = "".concat(iotPrefix, "--dashboard-editor-header");
  var extraContent = /*#__PURE__*/React__default.default.createElement("div", {
    "data-testid": testId,
    className: "".concat(baseClassName, "--right")
  }, /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(baseClassName, "--top")
  }), /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(baseClassName, "--bottom")
  }, (breakpointSwitcher === null || breakpointSwitcher === void 0 ? void 0 : breakpointSwitcher.enabled) && /*#__PURE__*/React__default.default.createElement(react.ContentSwitcher, {
    onChange: function onChange(e) {
      return setSelectedBreakpointIndex(e.index);
    },
    selectedIndex: selectedBreakpointIndex,
    className: "".concat(baseClassName, "--bottom__switcher"),
    "data-testid": "".concat(testId, "-breakpoint-switcher")
  }, /*#__PURE__*/React__default.default.createElement(react.IconSwitch, {
    name: "fit-to-screen",
    text: mergedI18n.headerFitToScreenButton,
    renderIcon: iconsReact.Maximize,
    index: 0,
    testId: "".concat(testId, "-fit-to-screen-switch"),
    tooltipPosition: "bottom"
  }), /*#__PURE__*/React__default.default.createElement(react.IconSwitch, {
    name: "large",
    text: mergedI18n.headerLargeButton,
    renderIcon: iconsReact.Screen,
    index: 1,
    testId: "".concat(testId, "-large-switch"),
    tooltipPosition: "bottom"
  }), /*#__PURE__*/React__default.default.createElement(react.IconSwitch, {
    name: "medium",
    text: mergedI18n.headerMediumButton,
    renderIcon: iconsReact.Laptop,
    index: 2,
    testId: "".concat(testId, "-medium-switch"),
    tooltipPosition: "bottom"
  }), /*#__PURE__*/React__default.default.createElement(react.IconSwitch, {
    name: "small",
    text: mergedI18n.headerSmallButton,
    renderIcon: iconsReact.Tablet,
    index: 3,
    testId: "".concat(testId, "-small-switch"),
    tooltipPosition: "bottom"
  })),
  // FileUploaderButton isn't a true button so extra styling is needed to make it look like a iconOnly button
  onImport && /*#__PURE__*/React__default.default.createElement(react.FileUploaderButton, {
    buttonKind: "ghost",
    size: "md",
    labelText: /*#__PURE__*/React__default.default.createElement(react.Tooltip, {
      label: mergedI18n.headerImportButton,
      align: "bottom"
    }, /*#__PURE__*/React__default.default.createElement(iconsReact.DocumentImport, null)),
    onChange: onImport,
    disableLabelChanges: true,
    accepts: ['.json'],
    multiple: false,
    "data-testid": "".concat(testId, "-file-uploader-button")
  }), onExport && /*#__PURE__*/React__default.default.createElement(Button, {
    kind: "ghost",
    size: "md",
    iconDescription: mergedI18n.headerExportButton,
    tooltipPosition: "bottom",
    tooltipAlignment: "center",
    hasIconOnly: true,
    renderIcon: iconsReact.DocumentExport,
    onClick: function onClick() {
      return onExport(dashboardJson);
    },
    "data-testid": "".concat(testId, "-export-button")
  }), onDelete && /*#__PURE__*/React__default.default.createElement(Button, {
    kind: "ghost",
    size: "md",
    iconDescription: mergedI18n.headerDeleteButton,
    tooltipPosition: "bottom",
    tooltipAlignment: "center",
    hasIconOnly: true,
    renderIcon: iconsReact.TrashCan,
    onClick: onDelete,
    "data-testid": "".concat(testId, "-delete-button")
  }), onCancel && /*#__PURE__*/React__default.default.createElement(Button, {
    kind: "secondary",
    size: "md",
    onClick: onCancel,
    "data-testid": "".concat(testId, "-cancel-button")
  }, mergedI18n.headerCancelButton), onSubmit && /*#__PURE__*/React__default.default.createElement(Button, {
    size: "md",
    disabled: isSubmitDisabled,
    onClick: function onClick() {
      return onSubmit(dashboardJson);
    },
    loading: isSubmitLoading,
    "data-testid": "".concat(testId, "-submit-button")
  }, mergedI18n.headerSubmitButton)));

  // handle the edit title button
  var handleEditClick = React.useCallback(function () {
    setIsTitleEditMode(true);
  }, []);
  var editComponents = React.useMemo(function () {
    var _isEmpty2;
    return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(react.TextInput, {
      size: "sm",
      labelText: mergedI18n.dashboardTitleLabel,
      hideLabel: true,
      id: "dashboardTitle",
      name: "dashboardTitle",
      value: updatedTitle,
      onChange: function onChange(e) {
        setUpdatedTitle(e.target.value);
      },
      invalidText: (_isEmpty2 = isEmpty(updatedTitle)) !== null && _isEmpty2 !== void 0 ? _isEmpty2 : mergedI18n.requiredMessage,
      invalid: isEmpty(updatedTitle),
      "data-testid": "".concat(testId, "-dashboard-title-input")
    }), /*#__PURE__*/React__default.default.createElement(Button, {
      kind: "ghost",
      size: "md",
      title: mergedI18n.headerCancelButton,
      onClick: function onClick() {
        setIsTitleEditMode(false);
        // revert the title back to the original
        setUpdatedTitle(title);
      },
      testId: "".concat(testId, "-cancel-title-button")
    }, mergedI18n.headerCancelButton), /*#__PURE__*/React__default.default.createElement(Button, {
      size: "md",
      onClick: function onClick() {
        onEditTitle(updatedTitle);
        setIsTitleEditMode(false);
      },
      testId: "".concat(testId, "-save-title-button")
    }, mergedI18n.saveTitleButton));
  }, [mergedI18n.dashboardTitleLabel, mergedI18n.requiredMessage, mergedI18n.headerCancelButton, mergedI18n.saveTitleButton, updatedTitle, testId, title, onEditTitle]);
  return /*#__PURE__*/React__default.default.createElement(PageTitleBar, {
    breadcrumb: breadcrumbs,
    extraContent: extraContent,
    title: title,
    editable: !!onEditTitle && !isTitleEditMode,
    renderTitleFunction: isTitleEditMode ? function () {
      return editComponents;
    } : null,
    onEdit: handleEditClick,
    i18n: {
      editIconDescription: mergedI18n.headerEditTitleButton
    },
    testId: "".concat(testId, "-page-title-bar")
  });
};
DashboardEditorHeader.defaultProps = defaultProps;
DashboardEditorHeader.propTypes = propTypes;
DashboardEditorHeader.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "DashboardEditorHeader",
  "props": {
    "title": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Dashboard title",
      "type": {
        "name": "node"
      },
      "required": false
    },
    "breadcrumbs": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "initial dashboard data to edit",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "node"
        }
      },
      "required": false
    },
    "onEditTitle": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, renders edit button next to title linked to this callback",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onImport": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, renders import button linked to this callback\nonImport(data, setNotification?)",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onExport": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, renders export button linked to this callback\nonExport(dashboardJson)",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onDelete": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if provided, renders delete button linked to this callback",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onCancel": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "If provided, renders cancel button linked to this callback",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onSubmit": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "If provided, renders submit button linked to this callback\nonSubmit(dashboardData)",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "isSubmitDisabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Whether to disable the submit button",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "isSubmitLoading": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Whether to set the loading spinner on the submit button",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  headerEditTitleButton: 'Edit title',\n  headerImportButton: 'Import',\n  headerExportButton: 'Export',\n  headerDeleteButton: 'Delete',\n  headerCancelButton: 'Cancel',\n  headerSubmitButton: 'Save and close',\n  headerFitToScreenButton: 'Fit to screen',\n  headerLargeButton: 'Large view',\n  headerMediumButton: 'Medium view',\n  headerSmallButton: 'Small view',\n  dashboardTitleLabel: 'Dashboard title',\n  requiredMessage: 'Required',\n  saveTitleButton: 'Save title',\n}",
        "computed": false
      },
      "description": "internationalization strings",
      "type": {
        "name": "shape",
        "value": {
          "headerEditTitleButton": {
            "name": "string",
            "required": false
          },
          "headerImportButton": {
            "name": "string",
            "required": false
          },
          "headerExportButton": {
            "name": "string",
            "required": false
          },
          "headerDeleteButton": {
            "name": "string",
            "required": false
          },
          "headerCancelButton": {
            "name": "string",
            "required": false
          },
          "headerSubmitButton": {
            "name": "string",
            "required": false
          },
          "headerFitToScreenButton": {
            "name": "string",
            "required": false
          },
          "headerXlargeButton": {
            "name": "string",
            "required": false
          },
          "headerLargeButton": {
            "name": "string",
            "required": false
          },
          "headerMediumButton": {
            "name": "string",
            "required": false
          },
          "dashboardTitleLabel": {
            "name": "string",
            "required": false
          },
          "requiredMessage": {
            "name": "string",
            "required": false
          },
          "saveTitleButton": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "selectedBreakpointIndex": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "currently selected breakpoint which is being held in state by DashboardEditor",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "setSelectedBreakpointIndex": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "handler to change the selectedBreakpoint state",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "breakpointSwitcher": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "if enabled, renders a ContentSwitcher with IconSwitches that allow for manually changing the breakpoint,\nregardless of the screen width",
      "type": {
        "name": "shape",
        "value": {
          "enabled": {
            "name": "bool",
            "required": false
          },
          "allowedBreakpoints": {
            "name": "arrayOf",
            "value": {
              "name": "string"
            },
            "required": false
          }
        }
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'dashboard-editor-header'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "dashboardJson": {
      "description": "The current dashboard's JSON",
      "type": {
        "name": "object"
      },
      "required": true
    }
  }
};
var DashboardEditorHeader$1 = DashboardEditorHeader;

module.exports = DashboardEditorHeader$1;
