var _excluded = ["items", "onCancel", "listHeight", "rowHeight", "onKeyDown", "onFocus", "onBlur"];
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; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import { Clear } from '@procore/core-icons/dist';
import { useId } from '@react-aria/utils';
import { VisuallyHidden } from '@react-aria/visually-hidden';
import { clamp, isNil } from 'ramda';
import React from 'react';
import { ProgressBar } from '../../ProgressBar/ProgressBar';
import { useI18nContext } from '../../_hooks/I18n';
import { StyledDeleteIcon, StyledProgress, StyledThumbnail, StyledThumbnailList, StyledThumbnailListContainer, StyledThumbnailListItem } from './ThumbnailList.styles';
export var defaultListHeight = 305;
export var defaultRowHeight = 56;
var progressValueText = function progressValueText(_ref) {
  var value = _ref.value;
  return "".concat(value, "%");
};
var Row = function Row(_ref2) {
  var _ref2$data = _ref2.data,
    items = _ref2$data.items,
    onCancel = _ref2$data.onCancel,
    isFocused = _ref2$data.isFocused,
    setNavigationPosition = _ref2$data.setNavigationPosition,
    style = _ref2.style,
    index = _ref2.index;
  var i18n = useI18nContext();
  var progressBarLabelId = useId();
  var item = items[index];
  var src = item.src,
    name = item.name,
    progress = item.progress,
    error = item.error;
  var focused = isFocused(index);
  var ariaLive = error ? 'assertive' : undefined;
  return /*#__PURE__*/React.createElement("div", {
    style: style,
    onMouseEnter: function onMouseEnter() {
      return setNavigationPosition(index);
    },
    "aria-live": ariaLive
  }, /*#__PURE__*/React.createElement(StyledThumbnailListItem, {
    error: error,
    focused: focused
  }, /*#__PURE__*/React.createElement(StyledThumbnail, {
    src: src,
    size: "sm",
    clickable: false,
    caption: name,
    error: error
  }), /*#__PURE__*/React.createElement(StyledProgress, null, error || !isNil(progress) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("span", {
    id: progressBarLabelId
  }, i18n.t('core.thumbnailList.uploading'))), /*#__PURE__*/React.createElement(ProgressBar, {
    "aria-labelledby": progressBarLabelId,
    value: progress,
    "aria-valuetext": progressValueText,
    animated: true
  }))), onCancel && /*#__PURE__*/React.createElement(StyledDeleteIcon, {
    "aria-label": i18n.t('core.thumbnailList.removeUpload'),
    icon: /*#__PURE__*/React.createElement(Clear, {
      size: "sm"
    }),
    size: "sm",
    tabIndex: -1,
    variant: "tertiary",
    onClick: function onClick() {
      return onCancel(item);
    }
  })));
};

// See https://github.com/bvaughn/react-window/issues/130
var outerElementType = /*#__PURE__*/React.forwardRef(function (props, ref) {
  return /*#__PURE__*/React.createElement("div", _extends({
    ref: ref,
    tabIndex: -1
  }, props));
});
var getNewNavigationPosition = function getNewNavigationPosition(next, max) {
  return clamp(0, Math.max(0, max - 1), next);
};
export var ThumbnailList = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
  var items = _ref3.items,
    onCancel = _ref3.onCancel,
    _ref3$listHeight = _ref3.listHeight,
    listHeight = _ref3$listHeight === void 0 ? defaultListHeight : _ref3$listHeight,
    _ref3$rowHeight = _ref3.rowHeight,
    rowHeight = _ref3$rowHeight === void 0 ? defaultRowHeight : _ref3$rowHeight,
    onKeyDown = _ref3.onKeyDown,
    _onFocus = _ref3.onFocus,
    _onBlur = _ref3.onBlur,
    props = _objectWithoutProperties(_ref3, _excluded);
  var rowCount = items.length;
  var height = Math.min(rowCount * defaultRowHeight, listHeight);
  var listRef = React.useRef(null);
  var listInstance = listRef.current;
  var _React$useState = React.useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    isListFocused = _React$useState2[0],
    setIsListFocused = _React$useState2[1];
  var _React$useState3 = React.useState(0),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    navigationPosition = _React$useState4[0],
    setNavigationPosition = _React$useState4[1];
  var isFocused = React.useCallback(function (index) {
    return isListFocused && navigationPosition === index;
  }, [isListFocused, navigationPosition]);
  var updateNavigationPosition = React.useCallback(function (newPosition) {
    setNavigationPosition(newPosition);
    listInstance === null || listInstance === void 0 ? void 0 : listInstance.scrollToItem(newPosition);
  }, [listInstance]);
  React.useEffect(function () {
    if (isListFocused) {
      listInstance === null || listInstance === void 0 ? void 0 : listInstance.scrollToItem(navigationPosition);
    }
  }, [isListFocused]);
  React.useEffect(function () {
    if (rowCount > 0 && rowCount <= navigationPosition) {
      setNavigationPosition(rowCount - 1);
    }
    if (rowCount <= 0) {
      setIsListFocused(false);
    }
  }, [rowCount]);
  var handleNavigation = function handleNavigation(e) {
    if (!isListFocused) return;
    switch (e.key) {
      case 'Enter':
        e.preventDefault();
        var highlightedItem = items[navigationPosition];
        onCancel === null || onCancel === void 0 ? void 0 : onCancel(highlightedItem);
        // Ensure scrolling only after the item was deleted
        setTimeout(function () {
          updateNavigationPosition(getNewNavigationPosition(navigationPosition, rowCount - 1));
        }, 0);
        if (rowCount - 1 === 0) {
          setIsListFocused(false);
        }
        break;
      case 'ArrowDown':
      case 'Down':
        e.preventDefault();
        updateNavigationPosition(getNewNavigationPosition(navigationPosition + 1, rowCount));
        break;
      case 'ArrowUp':
      case 'Up':
        e.preventDefault();
        updateNavigationPosition(getNewNavigationPosition(navigationPosition - 1, rowCount));
        break;
    }
    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
  };
  if (!rowCount) return null;
  return /*#__PURE__*/React.createElement(StyledThumbnailListContainer, _extends({
    tabIndex: rowCount !== 0 ? 0 : -1,
    onFocus: function onFocus(e) {
      setIsListFocused(true);
      _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(e);
    },
    onBlur: function onBlur(e) {
      setIsListFocused(false);
      _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e);
    },
    onKeyDown: handleNavigation
  }, props, {
    ref: ref
  }), /*#__PURE__*/React.createElement(StyledThumbnailList, {
    ref: listRef,
    width: "100%",
    height: height,
    itemCount: rowCount,
    itemSize: rowHeight,
    itemData: {
      items: items,
      onCancel: onCancel,
      isFocused: isFocused,
      setNavigationPosition: setNavigationPosition
    },
    style: {
      minHeight: height
    },
    outerElementType: outerElementType
  }, Row));
});
ThumbnailList.displayName = 'ThumbnailList';
//# sourceMappingURL=ThumbnailList.js.map