import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import 'core-js/modules/es.array.concat.js';
import 'core-js/modules/es.array.map.js';
import React__default from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { settings } from '../../constants/Settings.js';
import Button from '../Button/Button.js';
import { ChevronRight, ChevronLeft } from '@carbon/icons-react';

var iotPrefix = settings.iotPrefix;
var propTypes = {
  /** true if the legend should be full bleed  and occupy the full width of the map  */
  isFullWidth: PropTypes.bool.isRequired,
  /** true if the legend is collapsed (only relevant for isFullWidth:true) */
  isCollapsed: PropTypes.bool.isRequired,
  /** true if there should be extra wide margins, like when a card is expanded to full page */
  increasedMargin: PropTypes.bool,
  titleText: PropTypes.string,
  hideLegendText: PropTypes.string,
  showLegendText: PropTypes.string,
  /** list of text - color pairs for the legend. Each pair is an array where pos 0 is the text and pos 1 the color */
  stops: PropTypes.arrayOf(PropTypes.array).isRequired,
  /** callback for when the collapse toggle button is clicked */
  onCollapsToggle: PropTypes.func.isRequired,
  testId: PropTypes.string
};
var defaultProps = {
  titleText: 'Legend',
  hideLegendText: 'Hide legend',
  showLegendText: 'Show legend',
  increasedMargin: false,
  testId: 'map-legend'
};
var Legend = function Legend(_ref) {
  var increasedMargin = _ref.increasedMargin,
    isFullWidth = _ref.isFullWidth,
    stops = _ref.stops,
    titleText = _ref.titleText,
    hideLegendText = _ref.hideLegendText,
    showLegendText = _ref.showLegendText,
    isCollapsed = _ref.isCollapsed,
    onCollapsToggle = _ref.onCollapsToggle,
    testId = _ref.testId;
  var renderLegendKeys = function renderLegendKeys() {
    return stops.map(function (_ref2, i) {
      var _ref3 = _slicedToArray(_ref2, 2),
        value = _ref3[0],
        color = _ref3[1];
      var localValue = value.toLocaleString();
      return /*#__PURE__*/React__default.createElement("div", {
        key: "".concat(localValue, "-").concat(color, "-").concat(i),
        className: "".concat(iotPrefix, "--map-legend-keys")
      }, /*#__PURE__*/React__default.createElement("span", {
        className: "".concat(iotPrefix, "--map-legend-keys-color"),
        style: {
          backgroundColor: color
        }
      }), /*#__PURE__*/React__default.createElement("span", {
        className: "".concat(iotPrefix, "--map-legend-keys-value")
      }, localValue));
    });
  };
  return isFullWidth ? /*#__PURE__*/React__default.createElement("div", {
    "data-testid": testId,
    className: classnames("".concat(iotPrefix, "--map-legend"), "".concat(iotPrefix, "--map-legend--fullwidth"), _defineProperty({}, "".concat(iotPrefix, "--map-legend--fullwidth-collapsed"), isCollapsed))
  }, /*#__PURE__*/React__default.createElement(Button, {
    testId: "".concat(testId, "-collapse-toggle"),
    className: "".concat(iotPrefix, "--map-legend__collapse-btn"),
    kind: "ghost",
    size: "sm",
    renderIcon: document.dir === 'ltr' && isCollapsed || document.dir === 'rtl' && !isCollapsed ? ChevronRight : ChevronLeft,
    hasIconOnly: true,
    iconDescription: isCollapsed ? showLegendText : hideLegendText,
    tooltipPosition: document.dir === 'rtl' ? 'left' : 'right',
    onClick: onCollapsToggle
  }), /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(iotPrefix, "--map-legend-content")
  }, /*#__PURE__*/React__default.createElement("div", {
    title: titleText,
    className: "".concat(iotPrefix, "--map-legend__label")
  }, titleText), /*#__PURE__*/React__default.createElement("div", {
    className: "".concat(iotPrefix, "--map-legend__keys-container")
  }, renderLegendKeys()))) : /*#__PURE__*/React__default.createElement("div", {
    "data-testid": testId,
    className: classnames("".concat(iotPrefix, "--map-legend"), _defineProperty({}, "".concat(iotPrefix, "--map-legend--increased-margin"), increasedMargin))
  }, renderLegendKeys());
};
Legend.defaultProps = defaultProps;
Legend.propTypes = propTypes;
Legend.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Legend",
  "props": {
    "titleText": {
      "defaultValue": {
        "value": "'Legend'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "hideLegendText": {
      "defaultValue": {
        "value": "'Hide legend'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "showLegendText": {
      "defaultValue": {
        "value": "'Show legend'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "increasedMargin": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "true if there should be extra wide margins, like when a card is expanded to full page",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'map-legend'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "isFullWidth": {
      "description": "true if the legend should be full bleed  and occupy the full width of the map",
      "type": {
        "name": "bool"
      },
      "required": true
    },
    "isCollapsed": {
      "description": "true if the legend is collapsed (only relevant for isFullWidth:true)",
      "type": {
        "name": "bool"
      },
      "required": true
    },
    "stops": {
      "description": "list of text - color pairs for the legend. Each pair is an array where pos 0 is the text and pos 1 the color",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "array"
        }
      },
      "required": true
    },
    "onCollapsToggle": {
      "description": "callback for when the collapse toggle button is clicked",
      "type": {
        "name": "func"
      },
      "required": true
    }
  }
};
var Legend$1 = Legend;

export { Legend$1 as default };
