function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React from 'react';
import { StyledNavigation, StyledSidebar, StyledSourceItem } from './FileExplorerSidebar.styles';
import { useSidebarNavigation } from './useSidebarNavigation';
export function FileExplorerSidebar(_ref) {
  var selectedSource = _ref.value,
    onChange = _ref.onChange,
    sources = _ref.sources,
    isOpen = _ref.isOpen;
  var _React$useState = React.useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    isNavFocused = _React$useState2[0],
    setIsNavFocused = _React$useState2[1];
  var _React$useState3 = React.useState(true),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    isFocusVisible = _React$useState4[0],
    setIsFocusVisible = _React$useState4[1];
  var focusedSourceRef = React.useRef(null);
  var selectedSourceIndex = sources.findIndex(function (_ref2) {
    var sourceId = _ref2.sourceId;
    return sourceId === selectedSource;
  });
  var sidebarNavigation = useSidebarNavigation({
    initialIndex: selectedSourceIndex,
    size: sources.length,
    selectedIndex: selectedSourceIndex
  });
  React.useEffect(function () {
    sidebarNavigation.set(selectedSourceIndex);
  }, [selectedSourceIndex]);
  React.useEffect(function () {
    if (focusedSourceRef.current && isOpen) {
      focusedSourceRef.current.focus();
    }
  }, [sidebarNavigation.index, isOpen]);
  React.useEffect(function () {
    sidebarNavigation.setSize(sources.length);
  }, [sources.length]);
  var onKeyDown = function onKeyDown(e) {
    if (!isNavFocused) return;
    switch (e.nativeEvent.key) {
      case 'Enter':
        e.preventDefault();
        onChange(sources[sidebarNavigation.index].sourceId);
        break;
      case 'ArrowUp':
      case 'Up':
        e.preventDefault();
        sidebarNavigation.up();
        break;
      case 'ArrowDown':
      case 'Down':
        e.preventDefault();
        sidebarNavigation.down();
        break;
    }
  };
  return /*#__PURE__*/React.createElement(StyledSidebar, null, /*#__PURE__*/React.createElement(StyledNavigation, null, sources.map(function (source, idx) {
    var isFocused = idx === sidebarNavigation.index;
    return /*#__PURE__*/React.createElement(StyledSourceItem, {
      key: source.sourceId,
      loading: source.isUploading,
      error: source.hasError,
      icon: source.icon,
      selected: selectedSource === source.sourceId,
      focused: isNavFocused && isFocusVisible && isFocused,
      tabIndex: isFocused ? 0 : -1,
      ref: isFocused ? focusedSourceRef : null,
      onMouseDown: function onMouseDown() {
        // prevent focus blink on the latest focused item
        setIsFocusVisible(false);
      },
      onMouseUp: function onMouseUp() {
        setIsFocusVisible(true);
      },
      count: source.value.length,
      onFocus: function onFocus() {
        setIsNavFocused(true);
      },
      onBlur: function onBlur() {
        setIsNavFocused(false);
      },
      onKeyDown: onKeyDown,
      onClick: function onClick() {
        sidebarNavigation.set(idx);
        onChange(source.sourceId);
      }
    }, source.title);
  })));
}
//# sourceMappingURL=FileExplorerSidebar.js.map