'use strict';

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
require('core-js/modules/es.array.concat.js');
require('core-js/modules/es.array.map.js');
require('core-js/modules/es.object.to-string.js');
var React = require('react');
var classnames = require('classnames');
var PropTypes = require('prop-types');
var Settings = require('../../constants/Settings.js');
var Button = require('../Button/Button.js');
var CardPropTypes = require('../../constants/CardPropTypes.js');
var ScrollingControls = require('./ScrollingControls.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 classnames__default = /*#__PURE__*/_interopDefault(classnames);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);

var iotPrefix = Settings.settings.iotPrefix;
var BASE_CLASS_NAME = "".concat(iotPrefix, "--map-controls");
var propTypes = {
  /** list of map control buttons */
  controls: PropTypes__default.default.arrayOf(CardPropTypes.MapControlPropType),
  /** list of layered map control buttons that are expanded horizontally */
  layeredControls: PropTypes__default.default.arrayOf(CardPropTypes.MapControlPropType),
  i18n: PropTypes__default.default.shape({
    layerTriggerIconDescription: PropTypes__default.default.string,
    scrollUp: PropTypes__default.default.string,
    scrollDown: PropTypes__default.default.string
  }),
  /** true if the map controls are in an expanded card */
  isExpandedMode: PropTypes__default.default.bool,
  testId: PropTypes__default.default.string,
  /** position of the control buttons tooltip */
  tooltipPosition: PropTypes__default.default.oneOf(['left', 'top', 'bottom', 'right'])
};
var defaultProps = {
  controls: [],
  layeredControls: [],
  i18n: {
    layerTriggerIconDescription: 'Layered controls',
    scrollUp: 'Scroll up',
    scrollDown: 'Scroll down'
  },
  isExpandedMode: false,
  testId: 'map-controls',
  tooltipPosition: 'left'
};
var MapControls = function MapControls(_ref) {
  var layeredControls = _ref.layeredControls,
    controls = _ref.controls,
    tooltipPosition = _ref.tooltipPosition,
    isExpandedMode = _ref.isExpandedMode,
    i18n = _ref.i18n,
    testId = _ref.testId;
  var layerTriggerIconDescription = i18n.layerTriggerIconDescription,
    scrollUp = i18n.scrollUp,
    scrollDown = i18n.scrollDown;
  var _React$useState = React__default.default.useState(false),
    _React$useState2 = _slicedToArray__default.default(_React$useState, 2),
    layersOpen = _React$useState2[0],
    setLayersOpen = _React$useState2[1];
  var handleLayerClick = function handleLayerClick() {
    setLayersOpen(function (openState) {
      return !openState;
    });
  };
  var buttonSize = isExpandedMode ? 'md' : 'sm';
  var renderControl = function renderControl(control, index) {
    var _control$kind;
    if (control.group) {
      var groupClass = "".concat(BASE_CLASS_NAME, "-btn-group");
      var groupKey = control.group.reduce(function (key, childControl) {
        return "".concat(key).concat(childControl.iconDescription);
      }, index);
      return control.hasScroll ? isExpandedMode ? /*#__PURE__*/React__default.default.createElement(ScrollingControls, {
        testId: "".concat(testId, "-scroll-controls"),
        key: groupKey,
        controls: control.group,
        classname: groupClass,
        scrollUpIconDescriptionText: scrollUp,
        scrollDownIconDescriptionText: scrollDown,
        tooltipPosition: tooltipPosition,
        visibleItemsCount: control.visibleItemsCount
      }) : null : /*#__PURE__*/React__default.default.createElement("div", {
        key: groupKey,
        className: groupClass
      }, control.group.map(function (groupedControl, myIndex) {
        var _groupedControl$kind;
        return /*#__PURE__*/React__default.default.createElement(Button, {
          key: "".concat(groupedControl.iconDescription, "-").concat(myIndex),
          className: "".concat(BASE_CLASS_NAME, "-btn"),
          kind: (_groupedControl$kind = groupedControl.kind) !== null && _groupedControl$kind !== void 0 ? _groupedControl$kind : 'ghost',
          size: buttonSize,
          selected: groupedControl.selected,
          hasIconOnly: true,
          tooltipPosition: tooltipPosition,
          renderIcon: groupedControl.icon,
          iconDescription: groupedControl.iconDescription,
          onClick: groupedControl.onClick
        });
      }));
    }
    return /*#__PURE__*/React__default.default.createElement(Button, {
      key: "".concat(control.iconDescription, "-").concat(index),
      className: "".concat(BASE_CLASS_NAME, "-btn"),
      kind: (_control$kind = control.kind) !== null && _control$kind !== void 0 ? _control$kind : 'ghost',
      size: buttonSize,
      selected: control.selected,
      hasIconOnly: true,
      tooltipPosition: tooltipPosition,
      renderIcon: control.icon,
      iconDescription: control.iconDescription,
      onClick: control.onClick
    });
  };
  var renderLayers = function renderLayers(control, index) {
    var _control$kind2;
    return /*#__PURE__*/React__default.default.createElement(Button, {
      key: "".concat(control.iconDescription, "-").concat(index),
      className: "".concat(BASE_CLASS_NAME, "-layers-btn"),
      kind: (_control$kind2 = control.kind) !== null && _control$kind2 !== void 0 ? _control$kind2 : 'ghost',
      size: buttonSize,
      selected: control.selected,
      hasIconOnly: true,
      tooltipPosition: tooltipPosition,
      renderIcon: control.icon,
      iconDescription: control.iconDescription,
      onClick: control.onClick,
      tabIndex: layersOpen ? 0 : -1
    });
  };
  return /*#__PURE__*/React__default.default.createElement("div", {
    "data-testid": testId,
    className: classnames__default.default("".concat(BASE_CLASS_NAME, "__container"), _defineProperty__default.default({}, "".concat(BASE_CLASS_NAME, "__container--has-layers"), layeredControls.length))
  }, layeredControls.length !== 0 && /*#__PURE__*/React__default.default.createElement("div", {
    className: classnames__default.default("".concat(BASE_CLASS_NAME, "-layers"), _defineProperty__default.default({}, "".concat(BASE_CLASS_NAME, "-layers--open"), layersOpen))
  }, /*#__PURE__*/React__default.default.createElement(Button, {
    className: "".concat(BASE_CLASS_NAME, "-layers-trigger"),
    kind: "ghost",
    size: buttonSize,
    hasIconOnly: true,
    tooltipPosition: tooltipPosition,
    renderIcon: iconsReact.Layers,
    iconDescription: layerTriggerIconDescription,
    onClick: handleLayerClick
  }, /*#__PURE__*/React__default.default.createElement(iconsReact.CaretSortDown, {
    className: "".concat(BASE_CLASS_NAME, "-layers-trigger__caret")
  })), /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(BASE_CLASS_NAME, "-layers-wrapper")
  }, layeredControls.map(renderLayers))), controls.map(renderControl));
};
MapControls.propTypes = propTypes;
MapControls.defaultProps = defaultProps;
MapControls.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "MapControls",
  "props": {
    "controls": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "list of map control buttons",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "custom",
          "raw": "MapControlPropType"
        }
      },
      "required": false
    },
    "layeredControls": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "list of layered map control buttons that are expanded horizontally",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "custom",
          "raw": "MapControlPropType"
        }
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  layerTriggerIconDescription: 'Layered controls',\n  scrollUp: 'Scroll up',\n  scrollDown: 'Scroll down',\n}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "layerTriggerIconDescription": {
            "name": "string",
            "required": false
          },
          "scrollUp": {
            "name": "string",
            "required": false
          },
          "scrollDown": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "isExpandedMode": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "true if the map controls are in an expanded card",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'map-controls'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "tooltipPosition": {
      "defaultValue": {
        "value": "'left'",
        "computed": false
      },
      "description": "position of the control buttons tooltip",
      "type": {
        "name": "enum",
        "value": [{
          "value": "'left'",
          "computed": false
        }, {
          "value": "'top'",
          "computed": false
        }, {
          "value": "'bottom'",
          "computed": false
        }, {
          "value": "'right'",
          "computed": false
        }]
      },
      "required": false
    }
  }
};
var MapControls$1 = MapControls;

module.exports = MapControls$1;
