import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useContext, useState, useRef } from 'react';
import { FileUploaderControlContext } from "../../FileUploaderControlContext";
import { ThemeContext } from "../../../../lib/theming/ThemeContext";
import { FileUploaderFile } from "../../FileUploaderFile/FileUploaderFile";
import { FileUploaderFileStatus } from "../../fileUtils";
import { cx } from "../../../../lib/theming/Emotion";
import { useFileUploaderSize } from "../../hooks/useFileUploaderSize";
import { isThemeGTE } from "../../../../lib/theming/ThemeHelpers";
import { useControlLocale } from "../../hooks/useControlLocale";
import { pluralize } from "../../../../lib/pluralize";
import { LocaleContext } from "../../../../lib/locale";
import { jsStyles, jsTileStyles, jsRowStyles } from "../FileUploaderFileList.styles";
export var FileUploaderFileDataTids = {
  fileList: 'FileUploader__fileList'
};
export var FileUploaderFileList = function FileUploaderFileList(props) {
  var renderFile = props.renderFile,
    size = props.size,
    _props$view = props.view,
    view = _props$view === void 0 ? 'row' : _props$view,
    _props$validationSumm = props.validationSummary,
    validationSummary = _props$validationSumm === void 0 ? 'auto' : _props$validationSumm,
    _props$validationSumm2 = props.validationSummaryStart,
    validationSummaryStart = _props$validationSumm2 === void 0 ? 5 : _props$validationSumm2,
    withValidationTooltip = props.withValidationTooltip,
    validationTooltipPosition = props.validationTooltipPosition,
    withWarningIcon = props.withWarningIcon,
    _props$disabled = props.disabled,
    disabled = _props$disabled === void 0 ? false : _props$disabled,
    onRemove = props.onRemove;
  var _useContext = useContext(FileUploaderControlContext),
    files = _useContext.files;
  var theme = useContext(ThemeContext);
  var versionGTE5_5 = isThemeGTE(theme, '5.5');
  var locale = useControlLocale(versionGTE5_5);
  var _useContext2 = useContext(LocaleContext),
    langCode = _useContext2.langCode;
  var _useState = useState(null),
    focusedByTab = _useState[0],
    setFocusedByTab = _useState[1];
  var _useState2 = useState(null),
    hovered = _useState2[0],
    setHovered = _useState2[1];
  var mouseIsOverRef = useRef(false);
  var handleMouseEnter = function handleMouseEnter(index) {
    setHovered(index);
    mouseIsOverRef.current = true;
  };
  var handleMouseLeave = function handleMouseLeave() {
    setHovered(null);
    mouseIsOverRef.current = false;
  };
  var handleRemoveItem = function handleRemoveItem(index) {
    onRemove(index);
    if (hovered === index && mouseIsOverRef.current) {
      // Если текущий элемент был наведен, переключаемся на следующий элемент
      var currentIndex = files.findIndex(function (file) {
        return file.id === index;
      });
      if (currentIndex !== -1 && files[currentIndex + 1]) {
        setHovered(files[currentIndex + 1].id);
      } else {
        setHovered(null);
      }
    }
  };
  var isTileView = view === 'tile';
  var jsViewStyles = versionGTE5_5 && isTileView ? jsTileStyles : jsRowStyles;
  var fileWrapperClass = useFileUploaderSize(size, {
    small: jsViewStyles.fileWrapperSmall(theme),
    medium: jsViewStyles.fileWrapperMedium(theme),
    large: jsViewStyles.fileWrapperLarge(theme)
  });
  var summaryClass = useFileUploaderSize(size, {
    small: jsStyles.summarySmall(theme),
    medium: jsStyles.summaryMedium(theme),
    large: jsStyles.summaryLarge(theme)
  });
  var renderSummary = function renderSummary() {
    if (!versionGTE5_5 || validationSummary === 'disabled') {
      return null;
    }
    var warningLength = files.filter(function (file) {
      return file.status === FileUploaderFileStatus.Warning;
    }).length;
    var errorLength = files.filter(function (file) {
      return file.status === FileUploaderFileStatus.Error;
    }).length;
    if (validationSummary === 'auto' && files.length < validationSummaryStart) {
      return null;
    }
    if (!(warningLength + errorLength)) {
      return null;
    }
    return /*#__PURE__*/(
      React.createElement("div", {
        className: cx(jsStyles.summary(theme), summaryClass)
      }, errorLength > 0 && /*#__PURE__*/
      React.createElement("span", {
        className: jsStyles.summaryErrorText(theme)
      }, errorLength, "\xA0", pluralize.apply(void 0, [langCode, errorLength].concat(locale.errors))), warningLength > 0 && /*#__PURE__*/
      React.createElement("span", {
        className: jsStyles.summaryWarningText(theme)
      }, warningLength, "\xA0", pluralize.apply(void 0, [langCode, warningLength].concat(locale.warnings))))
    );
  };
  return /*#__PURE__*/(
    React.createElement("div", {
      "data-tid": FileUploaderFileDataTids.fileList,
      className: jsViewStyles.fileListWrapper(theme)
    }, renderSummary(), files.map(function (file, idx) {
      var _extends2, _ref, _files, _files2, _ref2, _ref3, _files3, _files4, _ref4;
      var hasFocus = focusedByTab === file.id;
      var hasHover = hovered === file.id;
      var hasError = file.status === FileUploaderFileStatus.Error;
      var hasWarning = file.status === FileUploaderFileStatus.Warning;
      var fileWrapperClassNames = cx(jsStyles.fileWrapper(theme), fileWrapperClass, versionGTE5_5 && _extends((_extends2 = {}, _extends2[jsStyles.fileWrapperFocus(theme)] = hasFocus, _extends2[jsStyles.fileWrapperHover(theme)] = hasHover, _extends2), hasError && (_ref = {}, _ref[jsStyles.errorFile(theme)] = !isTileView || hasHover, _ref[jsViewStyles.errorFileFocus(theme)] = hasFocus, _ref), !isTileView && hasError && (_ref2 = {}, _ref2[jsStyles.removeBorderTopRadius()] = ((_files = files[idx - 1]) == null ? void 0 : _files.status) === FileUploaderFileStatus.Error, _ref2[jsStyles.removeBorderBottomRadius()] = ((_files2 = files[idx + 1]) == null ? void 0 : _files2.status) === FileUploaderFileStatus.Error, _ref2), hasWarning && (_ref3 = {}, _ref3[jsStyles.warningFile(theme)] = !isTileView || hasHover, _ref3[jsViewStyles.warningFileFocus(theme)] = hasFocus, _ref3), !isTileView && hasWarning && (_ref4 = {}, _ref4[jsStyles.removeBorderTopRadius()] = ((_files3 = files[idx - 1]) == null ? void 0 : _files3.status) === FileUploaderFileStatus.Warning, _ref4[jsStyles.removeBorderBottomRadius()] = ((_files4 = files[idx + 1]) == null ? void 0 : _files4.status) === FileUploaderFileStatus.Warning, _ref4)));
      var fileProps = {
        file: file,
        multiple: true,
        size: size,
        view: view,
        disabled: disabled,
        hovered: hasHover,
        focused: hasFocus,
        onRemove: handleRemoveItem,
        withValidationTooltip: withValidationTooltip,
        validationTooltipPosition: validationTooltipPosition,
        withWarningIcon: withWarningIcon
      };
      var fileElement = renderFile(file, /*#__PURE__*/React.createElement(FileUploaderFile, fileProps), fileProps);
      return /*#__PURE__*/(
        React.createElement("div", {
          key: file.id,
          className: fileWrapperClassNames,
          onMouseEnter: function onMouseEnter() {
            return handleMouseEnter(file.id);
          },
          onMouseLeave: function onMouseLeave() {
            return handleMouseLeave();
          },
          onFocus: function onFocus() {
            return setFocusedByTab(file.id);
          },
          onBlur: function onBlur() {
            return setFocusedByTab(null);
          }
        }, /*#__PURE__*/

        React.createElement("div", {
          className: jsViewStyles.file()
        }, fileElement))
      );
    }))
  );
};
FileUploaderFileList.__KONTUR_REACT_UI__ = 'FileUploaderFileList';
FileUploaderFileList.displayName = 'FileUploaderFileList';