'use strict';

var _extends = require('@babel/runtime/helpers/extends');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
require('core-js/modules/es.array.concat.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 Settings = require('../../../constants/Settings.js');
var SharedPropTypes = require('../../../constants/SharedPropTypes.js');
var useSizeObserver = require('../../../hooks/useSizeObserver.js');
var TableViewItemPropTypes = require('./TableViewItemPropTypes.js');
var TableViewDropdownItem = require('./TableViewDropdownItem.js');
var iconsReact = require('@carbon/icons-react');

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

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

var iotPrefix = Settings.settings.iotPrefix;
var propTypes = {
  /** Set to true if the user has modified filters etc since the view was loaded */
  selectedViewEdited: PropTypes__default.default.bool,
  /** The id of the view that is currently selected */
  selectedViewId: PropTypes__default.default.string,
  disabled: PropTypes__default.default.bool,
  /** An array of items representing the user generated views */
  views: PropTypes__default.default.arrayOf(TableViewItemPropTypes),
  i18n: PropTypes__default.default.shape({
    view: PropTypes__default.default.string,
    edited: PropTypes__default.default.string,
    viewAll: PropTypes__default.default.string,
    saveAsNewView: PropTypes__default.default.string,
    saveChanges: PropTypes__default.default.string,
    manageViews: PropTypes__default.default.string,
    ariaLabel: PropTypes__default.default.string,
    tableViewMenu: PropTypes__default.default.string
  }),
  actions: PropTypes__default.default.shape({
    /** Callback for when the user selected save new View */
    onSaveAsNewView: PropTypes__default.default.func,
    /** Callback for when the user selected save View */
    onSaveChanges: PropTypes__default.default.func,
    /** Callback for when the user selected Manage views */
    onManageViews: PropTypes__default.default.func,
    /** Callback for when the current view is changed by the user */
    onChangeView: PropTypes__default.default.func
  }).isRequired,
  /** Used to override the internal components and props of the TableViewDropdown */
  overrides: PropTypes__default.default.shape({
    dropdown: SharedPropTypes.OverridePropTypes,
    dropdownItem: SharedPropTypes.OverridePropTypes
  }),
  style: PropTypes__default.default.objectOf(PropTypes__default.default.string),
  testID: PropTypes__default.default.string,
  /** When true hides all action items and only allows the selection of views  */
  isHidingStandardActions: PropTypes__default.default.bool
};
var defaultProps = {
  views: [],
  selectedViewId: undefined,
  i18n: {
    view: 'View',
    edited: 'Edited',
    viewAll: 'View All',
    saveAsNewView: 'Save as new view',
    saveChanges: 'Save changes',
    manageViews: 'Manage views',
    ariaLabel: 'Select view',
    tableViewMenu: 'Table view menu'
  },
  selectedViewEdited: false,
  disabled: false,
  overrides: undefined,
  style: undefined,
  testID: 'TableViewDropdown',
  isHidingStandardActions: false
};
var TableViewDropdown = function TableViewDropdown(_ref) {
  var _overrides$dropdown, _overrides$dropdownIt, _overrides$dropdown2;
  var selectedViewId = _ref.selectedViewId,
    selectedViewEdited = _ref.selectedViewEdited,
    views = _ref.views,
    _ref$actions = _ref.actions,
    onSaveChanges = _ref$actions.onSaveChanges,
    onSaveAsNewView = _ref$actions.onSaveAsNewView,
    onManageViews = _ref$actions.onManageViews,
    onChangeView = _ref$actions.onChangeView,
    disabled = _ref.disabled,
    i18n = _ref.i18n,
    overrides = _ref.overrides,
    style = _ref.style,
    testID = _ref.testID,
    isHidingStandardActions = _ref.isHidingStandardActions;
  var viewAllItem = {
    id: 'view-all',
    text: i18n.viewAll
  };
  var allItems = React.useMemo(function () {
    var saveAsNewItem = {
      id: 'save-new-view',
      text: i18n.saveAsNewView,
      customAction: onSaveAsNewView
    };
    var saveItem = {
      id: 'save-changes',
      text: i18n.saveChanges,
      customAction: onSaveChanges
    };
    var manageViewsItem = {
      id: 'manage-views',
      text: i18n.manageViews,
      customAction: onManageViews,
      icon: iconsReact.Settings
    };
    // Save changes item should only appear if the view has been edited and the current view is not 'View all'
    // 'View all' is equivalent to a "default view", which would not be able to get re-saved. The user should supply
    // their own default views that can be changed if they would like that functionality
    var dialogItems = selectedViewEdited && selectedViewId && selectedViewId !== 'view-all' ? [saveAsNewItem, saveItem, manageViewsItem] : [saveAsNewItem, manageViewsItem];
    return isHidingStandardActions ? views : // move the action / dialog items to the top so that they are always accessible
    // without scrolling in the case that there are many views.
    [].concat(dialogItems, [viewAllItem], _toConsumableArray__default.default(views));
  }, [i18n.saveAsNewView, i18n.saveChanges, i18n.manageViews, onSaveAsNewView, onSaveChanges, onManageViews, selectedViewEdited, selectedViewId, viewAllItem, views, isHidingStandardActions]);
  var mySelectedItem = allItems.find(function (item) {
    return item.id === selectedViewId;
  }) || viewAllItem;
  var MyDropDown = (overrides === null || overrides === void 0 || (_overrides$dropdown = overrides.dropdown) === null || _overrides$dropdown === void 0 ? void 0 : _overrides$dropdown.component) || react.Dropdown;
  var MyTableViewDropDownItem = (overrides === null || overrides === void 0 || (_overrides$dropdownIt = overrides.dropdownItem) === null || _overrides$dropdownIt === void 0 ? void 0 : _overrides$dropdownIt.component) || TableViewDropdownItem;
  var _useSizeObserver = useSizeObserver({
      initialWidth: 200
    }),
    _useSizeObserver2 = _slicedToArray__default.default(_useSizeObserver, 2),
    containerSize = _useSizeObserver2[0],
    containerRef = _useSizeObserver2[1];
  var onSelectionChange = function onSelectionChange(change) {
    var item = change.selectedItem;
    if (item) {
      if (item.customAction) {
        item.customAction(item);
      } else {
        onChangeView(item);
      }
    }
  };
  var itemToElement = function itemToElement(itemData) {
    var _overrides$dropdownIt2;
    return /*#__PURE__*/React__default.default.createElement(MyTableViewDropDownItem, _extends__default.default({
      testID: "TableViewDropdownItem-".concat(itemData.id),
      isCompact: containerSize.width < 200,
      item: itemData,
      isSelected: itemData.id === mySelectedItem.id,
      activeViewEdited: selectedViewEdited,
      i18n: i18n
    }, overrides === null || overrides === void 0 || (_overrides$dropdownIt2 = overrides.dropdownItem) === null || _overrides$dropdownIt2 === void 0 ? void 0 : _overrides$dropdownIt2.props));
  };
  return /*#__PURE__*/React__default.default.createElement("div", {
    ref: containerRef,
    className: "".concat(iotPrefix, "--view-dropdown__container"),
    style: style
  }, /*#__PURE__*/React__default.default.createElement(MyDropDown, _extends__default.default({
    label: i18n.tableViewMenu,
    "data-testid": testID,
    selectedItem: mySelectedItem,
    ariaLabel: i18n.ariaLabel,
    disabled: disabled,
    id: "".concat(iotPrefix, "--view-dropdown"),
    renderSelectedItem: itemToElement,
    itemToElement: itemToElement,
    itemToString: function itemToString(item) {
      return item.tooltip || item.text;
    },
    items: allItems,
    light: false,
    onChange: onSelectionChange
  }, overrides === null || overrides === void 0 || (_overrides$dropdown2 = overrides.dropdown) === null || _overrides$dropdown2 === void 0 ? void 0 : _overrides$dropdown2.props)));
};
TableViewDropdown.propTypes = propTypes;
TableViewDropdown.defaultProps = defaultProps;
TableViewDropdown.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "TableViewDropdown",
  "props": {
    "views": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "An array of items representing the user generated views",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "custom",
          "raw": "TableViewItemPropType"
        }
      },
      "required": false
    },
    "selectedViewId": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "The id of the view that is currently selected",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  view: 'View',\n  edited: 'Edited',\n  viewAll: 'View All',\n  saveAsNewView: 'Save as new view',\n  saveChanges: 'Save changes',\n  manageViews: 'Manage views',\n  ariaLabel: 'Select view',\n  tableViewMenu: 'Table view menu',\n}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "view": {
            "name": "string",
            "required": false
          },
          "edited": {
            "name": "string",
            "required": false
          },
          "viewAll": {
            "name": "string",
            "required": false
          },
          "saveAsNewView": {
            "name": "string",
            "required": false
          },
          "saveChanges": {
            "name": "string",
            "required": false
          },
          "manageViews": {
            "name": "string",
            "required": false
          },
          "ariaLabel": {
            "name": "string",
            "required": false
          },
          "tableViewMenu": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "selectedViewEdited": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Set to true if the user has modified filters etc since the view was loaded",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "overrides": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Used to override the internal components and props of the TableViewDropdown",
      "type": {
        "name": "shape",
        "value": {
          "dropdown": {
            "name": "custom",
            "raw": "OverridePropTypes",
            "required": false
          },
          "dropdownItem": {
            "name": "custom",
            "raw": "OverridePropTypes",
            "required": false
          }
        }
      },
      "required": false
    },
    "style": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "",
      "type": {
        "name": "objectOf",
        "value": {
          "name": "string"
        }
      },
      "required": false
    },
    "testID": {
      "defaultValue": {
        "value": "'TableViewDropdown'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "isHidingStandardActions": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "When true hides all action items and only allows the selection of views",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "actions": {
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "onSaveAsNewView": {
            "name": "func",
            "description": "Callback for when the user selected save new View",
            "required": false
          },
          "onSaveChanges": {
            "name": "func",
            "description": "Callback for when the user selected save View",
            "required": false
          },
          "onManageViews": {
            "name": "func",
            "description": "Callback for when the user selected Manage views",
            "required": false
          },
          "onChangeView": {
            "name": "func",
            "description": "Callback for when the current view is changed by the user",
            "required": false
          }
        }
      },
      "required": true
    }
  }
};
var TableViewDropdown$1 = TableViewDropdown;

module.exports = TableViewDropdown$1;
