var _excluded = ["items", "onCancel", "listHeight", "rowHeight", "onKeyDown", "onFocus", "onBlur"];
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, 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';
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