'use strict';

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _extends = require('@babel/runtime/helpers/extends');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
require('core-js/modules/es.array.concat.js');
require('core-js/modules/es.array.map.js');
var React = require('react');
var PropTypes = require('prop-types');
var classnames = require('classnames');
var Button = require('../Button/Button.js');
var Settings = require('../../constants/Settings.js');
var CardPropTypes = require('../../constants/CardPropTypes.js');
var iconsReact = require('@carbon/icons-react');

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

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

var iotPrefix = Settings.settings.iotPrefix;
var BASE_CLASS_NAME = "".concat(iotPrefix, "--map-scroll-controls");
var propTypes = {
  /** The list of controls placed in the scrollable group */
  controls: PropTypes__default.default.arrayOf(CardPropTypes.MapControlPropType).isRequired,
  scrollUpIconDescriptionText: PropTypes__default.default.string,
  scrollDownIconDescriptionText: PropTypes__default.default.string,
  tooltipPosition: PropTypes__default.default.string,
  testId: PropTypes__default.default.string,
  /** Number of visible items shown between the scroll buttons */
  visibleItemsCount: PropTypes__default.default.number
};
var defaultProps = {
  visibleItemsCount: 6,
  testId: 'map-scroll-controls',
  tooltipPosition: 'left',
  scrollUpIconDescriptionText: 'Scroll up',
  scrollDownIconDescriptionText: 'Scroll down'
};
var ScrollingControls = function ScrollingControls(_ref) {
  var controls = _ref.controls,
    visibleItemsCount = _ref.visibleItemsCount,
    tooltipPosition = _ref.tooltipPosition,
    scrollUpIconDescriptionText = _ref.scrollUpIconDescriptionText,
    scrollDownIconDescriptionText = _ref.scrollDownIconDescriptionText,
    testId = _ref.testId;
  var scrollContainerRef = React.useRef();
  var buttonHeightPx = 40;
  var scrollBy = (visibleItemsCount - 1 || 1) * buttonHeightPx;
  var _useState = React.useState(false),
    _useState2 = _slicedToArray__default.default(_useState, 2),
    scrollDownDisabled = _useState2[0],
    setScrollDownDisabled = _useState2[1];
  var _useState3 = React.useState(true),
    _useState4 = _slicedToArray__default.default(_useState3, 2),
    scrollUpDisabled = _useState4[0],
    setScrollUpDisabled = _useState4[1];
  var handleScrolling = function handleScrolling(distance) {
    var container = scrollContainerRef.current;
    var scrollingDown = distance > 0;
    container.scrollBy({
      left: 0,
      top: distance,
      behavior: 'smooth'
    });
    setScrollUpDisabled(Math.abs(container.scrollTop) + distance === 0);
    setScrollDownDisabled(scrollingDown && container.scrollHeight - (Math.abs(container.scrollTop) + scrollBy) === container.clientHeight);
  };
  return /*#__PURE__*/React__default.default.createElement("div", {
    "data-testid": testId,
    className: classnames__default.default("".concat(BASE_CLASS_NAME, "__container"))
  }, /*#__PURE__*/React__default.default.createElement(Button, {
    testId: "".concat(testId, "-scroll-up"),
    className: classnames__default.default("".concat(BASE_CLASS_NAME, "__btn"), "".concat(BASE_CLASS_NAME, "__scroll-btn")),
    disabled: scrollUpDisabled,
    kind: "ghost",
    size: "md",
    hasIconOnly: true,
    tooltipPosition: tooltipPosition,
    renderIcon: function renderIcon(props) {
      return /*#__PURE__*/React__default.default.createElement(iconsReact.ChevronUp, _extends__default.default({
        size: 16
      }, props));
    },
    iconDescription: scrollUpIconDescriptionText,
    onClick: function onClick() {
      return handleScrolling(scrollBy * -1);
    }
  }), scrollUpDisabled ? null : /*#__PURE__*/React__default.default.createElement("div", {
    className: "".concat(BASE_CLASS_NAME, "__gradient")
  }), /*#__PURE__*/React__default.default.createElement("div", {
    "data-testid": "".concat(testId, "-scroll-area"),
    ref: scrollContainerRef,
    style: _defineProperty__default.default(_defineProperty__default.default({}, "--visble-items-count", visibleItemsCount), "--scroll-area-height", "".concat(visibleItemsCount * buttonHeightPx, "px")),
    className: classnames__default.default("".concat(BASE_CLASS_NAME, "__scroll-area"))
  }, controls.map(function (control, i) {
    return /*#__PURE__*/React__default.default.createElement(Button, {
      className: "".concat(BASE_CLASS_NAME, "__btn"),
      key: "".concat(control.iconDescription, "-").concat(i),
      kind: "ghost",
      size: "md",
      hasIconOnly: true,
      tooltipPosition: tooltipPosition,
      renderIcon: control.icon,
      iconDescription: control.iconDescription,
      onClick: control.onClick
    });
  })), scrollDownDisabled ? null : /*#__PURE__*/React__default.default.createElement("div", {
    className: classnames__default.default("".concat(BASE_CLASS_NAME, "__gradient"), "".concat(BASE_CLASS_NAME, "__gradient--flipped"))
  }), /*#__PURE__*/React__default.default.createElement(Button, {
    testId: "".concat(testId, "-scroll-down"),
    className: classnames__default.default("".concat(BASE_CLASS_NAME, "__btn"), "".concat(BASE_CLASS_NAME, "__scroll-btn")),
    disabled: scrollDownDisabled,
    kind: "ghost",
    size: "md",
    hasIconOnly: true,
    tooltipPosition: tooltipPosition,
    renderIcon: function renderIcon(props) {
      return /*#__PURE__*/React__default.default.createElement(iconsReact.ChevronDown, _extends__default.default({
        size: 16
      }, props));
    },
    iconDescription: scrollDownIconDescriptionText,
    onClick: function onClick() {
      return handleScrolling(scrollBy);
    }
  }));
};
ScrollingControls.defaultProps = defaultProps;
ScrollingControls.propTypes = propTypes;
ScrollingControls.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ScrollingControls",
  "props": {
    "visibleItemsCount": {
      "defaultValue": {
        "value": "6",
        "computed": false
      },
      "description": "Number of visible items shown between the scroll buttons",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'map-scroll-controls'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "tooltipPosition": {
      "defaultValue": {
        "value": "'left'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "scrollUpIconDescriptionText": {
      "defaultValue": {
        "value": "'Scroll up'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "scrollDownIconDescriptionText": {
      "defaultValue": {
        "value": "'Scroll down'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "controls": {
      "description": "The list of controls placed in the scrollable group",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "custom",
          "raw": "MapControlPropType"
        }
      },
      "required": true
    }
  }
};
var ScrollingControls$1 = ScrollingControls;

module.exports = ScrollingControls$1;
