'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

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/web.dom-collections.for-each.js');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _extends = require('@babel/runtime/helpers/extends');
var keyBy = require('../../node_modules/lodash-es/keyBy.js');
var omit = require('../../node_modules/lodash-es/omit.js');
require('core-js/modules/es.array.concat.js');
require('core-js/modules/es.array.map.js');
require('core-js/modules/es.object.entries.js');
require('core-js/modules/es.object.keys.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 classnames = require('classnames');
var useLangDirection = require('../../utils/useLangDirection.js');
var Settings = require('../../constants/Settings.js');
var CardPropTypes = require('../../constants/CardPropTypes.js');
var LayoutConstants = require('../../constants/LayoutConstants.js');
var DateTimePickerV2WithoutTimeSpinner = require('../DateTimePicker/DateTimePickerV2WithoutTimeSpinner.js');
var Button = require('../Button/Button.js');
var DateConstants = require('../../constants/DateConstants.js');
var dayjs = require('../../utils/dayjs.js');
var CardRangePicker = require('./CardRangePicker.js');
var iconsReact = require('@carbon/icons-react');

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

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

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,
  prefix = Settings.settings.prefix;
var ToolbarSVGWrapper = function ToolbarSVGWrapper(props) {
  return /*#__PURE__*/React__default.default.createElement(Button, _extends__default.default({
    kind: "ghost",
    className: classnames__default.default("".concat(iotPrefix, "--card--toolbar-action"), "".concat(iotPrefix, "--card--toolbar-svg-wrapper"), "".concat(prefix, "--btn--icon-only") // can't actually use the hasIconOnly prop because we don't want the tooltip
    )
  }, props, {
    size: "sm"
  }));
};
var propTypes = _objectSpread(_objectSpread({
  /** set of available actions for the card */
  availableActions: PropTypes__default.default.objectOf(PropTypes__default.default.oneOfType([PropTypes__default.default.bool, PropTypes__default.default.string])).isRequired,
  /** is the card editable */
  isEditable: PropTypes__default.default.bool,
  /** is the card expanded */
  isExpanded: PropTypes__default.default.bool,
  /**
   * Define the icon render to be rendered.
   * Can be a React component class
   */
  renderExpandIcon: PropTypes__default.default.oneOfType([PropTypes__default.default.func, PropTypes__default.default.object]),
  className: PropTypes__default.default.string
}, omit(CardRangePicker.CardRangePickerPropTypes, 'onClose')), {}, {
  /** Generates the available time range selection options. Each option should include 'this' or 'last'.
   * i.e. { thisWeek: 'This week', lastWeek: 'Last week'}
   */
  timeRange: PropTypes__default.default.oneOfType([CardRangePicker.CardRangePickerPropTypes.timeRange, DateTimePickerV2WithoutTimeSpinner.DateTimePickerDefaultValuePropTypes]),
  timeRangeOptions: CardPropTypes.TimeRangeOptionsPropTypes,
  // eslint-disable-line react/require-default-props
  i18n: PropTypes__default.default.shape({
    last24Hours: PropTypes__default.default.string,
    last7Days: PropTypes__default.default.string,
    lastMonth: PropTypes__default.default.string,
    lastQuarter: PropTypes__default.default.string,
    lastYear: PropTypes__default.default.string,
    thisWeek: PropTypes__default.default.string,
    thisMonth: PropTypes__default.default.string,
    thisQuarter: PropTypes__default.default.string,
    thisYear: PropTypes__default.default.string,
    overflowMenuDescription: PropTypes__default.default.string,
    cloneCardLabel: PropTypes__default.default.string,
    deleteCardLabel: PropTypes__default.default.string,
    closeLabel: PropTypes__default.default.string,
    expandLabel: PropTypes__default.default.string,
    settingsLabel: PropTypes__default.default.string,
    extraActionLabel: PropTypes__default.default.string
  }),
  testId: PropTypes__default.default.string,
  locale: PropTypes__default.default.string,
  dateTimeMask: PropTypes__default.default.string,
  /** If set to true it will render outside of the current DOM in a portal, otherwise render as a child */
  renderDateDropdownInPortal: PropTypes__default.default.bool,
  id: PropTypes__default.default.string
});
var defaultProps = {
  isEditable: false,
  isExpanded: false,
  renderExpandIcon: iconsReact.Popup,
  className: null,
  locale: 'en',
  timeRangeOptions: null,
  timeRange: null,
  i18n: {
    last24Hours: 'Last 24 hours',
    last7Days: 'Last 7 days',
    lastMonth: 'Last month',
    lastQuarter: 'Last quarter',
    lastYear: 'Last year',
    thisWeek: 'This week',
    thisMonth: 'This month',
    thisQuarter: 'This quarter',
    thisYear: 'This year',
    overflowMenuDescription: 'Card actions menu',
    cloneCardLabel: 'Clone card',
    deleteCardLabel: 'Delete card',
    closeLabel: 'Close',
    expandLabel: 'Expand',
    settingsLabel: 'Settings',
    extraActionLabel: 'Action Label'
  },
  testId: 'card-toolbar',
  dateTimeMask: dayjs.DAYJS_INPUT_FORMATS.RANGE,
  renderDateDropdownInPortal: true,
  id: null
};
var CardToolbar = function CardToolbar(_ref) {
  var i18n = _ref.i18n,
    width = _ref.width,
    isEditable = _ref.isEditable,
    isExpanded = _ref.isExpanded,
    renderExpandIcon = _ref.renderExpandIcon,
    availableActions = _ref.availableActions,
    timeRange = _ref.timeRange,
    timeRangeOptionsProp = _ref.timeRangeOptions,
    onCardAction = _ref.onCardAction,
    className = _ref.className,
    testId = _ref.testId,
    locale = _ref.locale,
    dateTimeMask = _ref.dateTimeMask,
    extraActions = _ref.extraActions,
    renderDateDropdownInPortal = _ref.renderDateDropdownInPortal,
    id = _ref.id,
    timeZone = _ref.timeZone;
  var mergedI18n = _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
  var langDir = useLangDirection.useLangDirection();
  var overflowMenuPosition = React__default.default.useMemo(function () {
    return langDir === 'ltr';
  }, [langDir]);
  // maps the timebox internal label to a translated string
  // Need the default here in case that the CardToolbar is used by multiple different components
  // Also needs to reassign itself if i18n changes
  var timeRangeOptions = React.useMemo(function () {
    return timeRangeOptionsProp || (typeof (availableActions === null || availableActions === void 0 ? void 0 : availableActions.range) === 'string' // if we're using date time picker default to those options
    ? keyBy(DateConstants.PRESET_VALUES, 'id') : {
      last24Hours: mergedI18n.last24HoursLabel,
      last7Days: mergedI18n.last7DaysLabel,
      lastMonth: mergedI18n.lastMonthLabel,
      lastQuarter: mergedI18n.lastQuarterLabel,
      lastYear: mergedI18n.lastYearLabel,
      thisWeek: mergedI18n.thisWeekLabel,
      thisMonth: mergedI18n.thisMonthLabel,
      thisQuarter: mergedI18n.thisQuarterLabel,
      thisYear: mergedI18n.thisYearLabel
    });
  }, [availableActions, mergedI18n.last24HoursLabel, mergedI18n.last7DaysLabel, mergedI18n.lastMonthLabel, mergedI18n.lastQuarterLabel, mergedI18n.lastYearLabel, mergedI18n.thisMonthLabel, mergedI18n.thisQuarterLabel, mergedI18n.thisWeekLabel, mergedI18n.thisYearLabel, timeRangeOptionsProp]);
  var handleDateTimePickerChange = React.useCallback(function (selectedValue) {
    onCardAction('CHANGE_TIME_RANGE', selectedValue);
  }, [onCardAction]);
  var extraActionSlot = extraActions && Object.keys(extraActions).length !== 0 ? extraActions.children && extraActions.children.length ? /*#__PURE__*/React__default.default.createElement(react.OverflowMenu, _extends__default.default({
    menuOptionsClass: "".concat(iotPrefix, "--card--toolbar__overflow-menu"),
    flipped: overflowMenuPosition,
    iconDescription: extraActions.iconDescription || mergedI18n.overflowMenuDescription,
    autoAlign: true
  }, extraActions.icon ? {
    renderIcon: extraActions.icon
  } : {}), extraActions.children.map(function (child, i) {
    return !child.hidden ? /*#__PURE__*/React__default.default.createElement(react.OverflowMenuItem, {
      "data-testid": "".concat(testId, "-extra-overflow-menu-item-").concat(i),
      key: "".concat(child.id, "-").concat(i),
      itemText: child.itemText,
      disabled: child.disabled,
      onClick: function onClick() {
        return child.callback ? child.callback(child) : null;
      },
      requireTitle: true
    }) : null;
  })) : extraActions.icon ? /*#__PURE__*/React__default.default.createElement(ToolbarSVGWrapper, {
    title: extraActions.iconDescription || mergedI18n.extraActionLabel,
    onClick: function onClick() {
      return extraActions.callback ? extraActions.callback(extraActions) : null;
    },
    renderIcon: extraActions.icon,
    testId: "".concat(testId, "-extra-single-action"),
    disabled: extraActions.disabled
  }) : extraActions.content ? /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(iotPrefix, "--card--toolbar-action--custom-actions"),
    "data-testid": "".concat(testId, "-extra-actions")
  }, extraActions.content) : null : null;
  return isEditable ? /*#__PURE__*/React__default.default.createElement("div", {
    "data-testid": testId,
    className: classnames__default.default(className, "".concat(iotPrefix, "--card--toolbar"))
  }, (availableActions.clone || availableActions.delete) && /*#__PURE__*/React__default.default.createElement(react.OverflowMenu, {
    flipped: overflowMenuPosition,
    iconDescription: mergedI18n.overflowMenuDescription,
    autoAlign: true
  }, availableActions.clone && /*#__PURE__*/React__default.default.createElement(react.OverflowMenuItem, {
    onClick: function onClick() {
      onCardAction(LayoutConstants.CARD_ACTIONS.CLONE_CARD);
    },
    itemText: mergedI18n.cloneCardLabel,
    title: mergedI18n.cloneCardLabel,
    requireTitle: true,
    "data-testid": "".concat(testId, "-clone-button")
  }), availableActions.delete && /*#__PURE__*/React__default.default.createElement(react.OverflowMenuItem, {
    isDelete: true,
    onClick: function onClick() {
      onCardAction(LayoutConstants.CARD_ACTIONS.DELETE_CARD);
    },
    itemText: mergedI18n.deleteCardLabel,
    title: mergedI18n.deleteCardLabel,
    requireTitle: true,
    "data-testid": "".concat(testId, "-delete-button")
  }))) : /*#__PURE__*/React__default.default.createElement("div", {
    "data-testid": testId,
    className: classnames__default.default(className, "".concat(iotPrefix, "--card--toolbar"))
  }, availableActions.range ? typeof availableActions.range === 'boolean' ?
  /*#__PURE__*/
  // boolean is the old range picker
  React__default.default.createElement(CardRangePicker.default, {
    width: width,
    i18n: mergedI18n,
    timeRange: timeRange,
    timeRangeOptions: timeRangeOptions,
    onCardAction: onCardAction,
    cardWidth: width,
    testId: "".concat(testId, "-range-picker")
  }) :
  /*#__PURE__*/
  // string values mean use the new picker
  React__default.default.createElement(react.unstable_FeatureFlags, {
    enableV12DynamicFloatingStyles: true
  }, /*#__PURE__*/React__default.default.createElement(DateTimePickerV2WithoutTimeSpinner.default, {
    id: id,
    i18n: mergedI18n,
    dateTimeMask: dateTimeMask,
    locale: locale,
    timeZone: timeZone,
    hasIconOnly: true,
    presets: Object.entries(timeRangeOptions).reduce(function (acc, _ref2) {
      var _ref3 = _slicedToArray__default.default(_ref2, 2),
        timeRangeOptionKey = _ref3[0],
        timeRangeOption = _ref3[1];
      acc.push({
        id: timeRangeOptionKey,
        label: timeRangeOption.label || mergedI18n.timeRange,
        offset: timeRangeOption.offset
      });
      return acc;
    }, []),
    defaultValue: timeRange,
    onApply: handleDateTimePickerChange,
    renderInPortal: renderDateDropdownInPortal,
    useAutoPositioning: true,
    buttonProps: {
      className: classnames__default.default("".concat(iotPrefix, "--card--toolbar-action"), "".concat(iotPrefix, "--card--toolbar-svg-wrapper"), "".concat(prefix, "--btn--icon-only"))
    }
  })) : null, availableActions.settings ? /*#__PURE__*/React__default.default.createElement(ToolbarSVGWrapper, {
    title: mergedI18n.settingsLabel,
    onClick: function onClick() {
      return onCardAction(LayoutConstants.CARD_ACTIONS.ON_SETTINGS_CLICK);
    },
    iconDescription: mergedI18n.settingsLabel,
    renderIcon: iconsReact.Settings,
    testId: "".concat(testId, "-settings-button")
  }) : null, availableActions.expand ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, isExpanded ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, availableActions.extra ? extraActionSlot : null, /*#__PURE__*/React__default.default.createElement(ToolbarSVGWrapper, {
    title: mergedI18n.closeLabel,
    onClick: function onClick() {
      return onCardAction(LayoutConstants.CARD_ACTIONS.CLOSE_EXPANDED_CARD);
    },
    iconDescription: mergedI18n.closeLabel,
    renderIcon: iconsReact.Close,
    testId: "".concat(testId, "-close-button")
  })) : /*#__PURE__*/React__default.default.createElement(ToolbarSVGWrapper, {
    title: mergedI18n.expandLabel,
    onClick: function onClick() {
      onCardAction(LayoutConstants.CARD_ACTIONS.OPEN_EXPANDED_CARD);
    },
    iconDescription: mergedI18n.expandLabel,
    renderIcon: renderExpandIcon,
    testId: "".concat(testId, "-expand-button")
  })) : null, !isExpanded && availableActions.extra ? extraActionSlot : null);
};
CardToolbar.propTypes = propTypes;
CardToolbar.defaultProps = defaultProps;
CardToolbar.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CardToolbar",
  "props": {
    "isEditable": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "is the card editable",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "isExpanded": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "is the card expanded",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "renderExpandIcon": {
      "defaultValue": {
        "value": "Popup",
        "computed": true
      },
      "description": "Define the icon render to be rendered.\nCan be a React component class",
      "type": {
        "name": "union",
        "value": [{
          "name": "func"
        }, {
          "name": "object"
        }]
      },
      "required": false
    },
    "className": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "locale": {
      "defaultValue": {
        "value": "'en'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "timeRangeOptions": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "custom",
        "raw": "TimeRangeOptionsPropTypes"
      },
      "required": false
    },
    "timeRange": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "Generates the available time range selection options. Each option should include 'this' or 'last'.\ni.e. { thisWeek: 'This week', lastWeek: 'Last week'}",
      "type": {
        "name": "union",
        "value": [{
          "name": "custom",
          "raw": "CardRangePickerPropTypes.timeRange"
        }, {
          "name": "custom",
          "raw": "DateTimePickerDefaultValuePropTypes"
        }]
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  last24Hours: 'Last 24 hours',\n  last7Days: 'Last 7 days',\n  lastMonth: 'Last month',\n  lastQuarter: 'Last quarter',\n  lastYear: 'Last year',\n  thisWeek: 'This week',\n  thisMonth: 'This month',\n  thisQuarter: 'This quarter',\n  thisYear: 'This year',\n  overflowMenuDescription: 'Card actions menu',\n  cloneCardLabel: 'Clone card',\n  deleteCardLabel: 'Delete card',\n  closeLabel: 'Close',\n  expandLabel: 'Expand',\n  settingsLabel: 'Settings',\n  extraActionLabel: 'Action Label',\n}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "last24Hours": {
            "name": "string",
            "required": false
          },
          "last7Days": {
            "name": "string",
            "required": false
          },
          "lastMonth": {
            "name": "string",
            "required": false
          },
          "lastQuarter": {
            "name": "string",
            "required": false
          },
          "lastYear": {
            "name": "string",
            "required": false
          },
          "thisWeek": {
            "name": "string",
            "required": false
          },
          "thisMonth": {
            "name": "string",
            "required": false
          },
          "thisQuarter": {
            "name": "string",
            "required": false
          },
          "thisYear": {
            "name": "string",
            "required": false
          },
          "overflowMenuDescription": {
            "name": "string",
            "required": false
          },
          "cloneCardLabel": {
            "name": "string",
            "required": false
          },
          "deleteCardLabel": {
            "name": "string",
            "required": false
          },
          "closeLabel": {
            "name": "string",
            "required": false
          },
          "expandLabel": {
            "name": "string",
            "required": false
          },
          "settingsLabel": {
            "name": "string",
            "required": false
          },
          "extraActionLabel": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'card-toolbar'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "dateTimeMask": {
      "defaultValue": {
        "value": "DAYJS_INPUT_FORMATS.RANGE",
        "computed": true
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "renderDateDropdownInPortal": {
      "defaultValue": {
        "value": "true",
        "computed": false
      },
      "description": "If set to true it will render outside of the current DOM in a portal, otherwise render as a child",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "id": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "availableActions": {
      "description": "set of available actions for the card",
      "type": {
        "name": "objectOf",
        "value": {
          "name": "union",
          "value": [{
            "name": "bool"
          }, {
            "name": "string"
          }]
        }
      },
      "required": true
    }
  },
  "composes": ["lodash-es"]
};
var CardToolbar$1 = CardToolbar;
ToolbarSVGWrapper.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ToolbarSVGWrapper"
};

exports.ToolbarSVGWrapper = ToolbarSVGWrapper;
exports.default = CardToolbar$1;
