var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import React, { useContext, useState, useRef } from 'react';
import { useEmotion, useStyles } from '../../../lib/renderEnvironment/index.js';
import { ThemeContext } from '../../../lib/theming/ThemeContext.js';
import { pluralize } from '../../../lib/pluralize.js';
import { LocaleContext } from '../../../lib/locale/index.js';
import { FileUploaderControlContext } from '../FileUploaderControlContext.js';
import { FileUploaderFileStatus } from '../fileUtils.js';
import { useFileUploaderSize } from '../hooks/useFileUploaderSize.js';
import { useControlLocale } from '../hooks/useControlLocale.js';
import { getJsStyles, getJsTileStyles, getJsRowStyles } from './FileUploaderFileList.styles.js';
export var FileUploaderFileDataTids = {
    fileList: 'FileUploader__fileList',
};
export var FileUploaderFileList = function (props) {
    var renderFile = props.renderFile, size = props.size, _a = props.view, view = _a === void 0 ? 'row' : _a, _b = props.validationSummary, validationSummary = _b === void 0 ? 'auto' : _b, _c = props.validationSummaryStart, validationSummaryStart = _c === void 0 ? 5 : _c, withValidationTooltip = props.withValidationTooltip, validationTooltipPosition = props.validationTooltipPosition, withWarningIcon = props.withWarningIcon, _d = props.disabled, disabled = _d === void 0 ? false : _d, onRemove = props.onRemove;
    var files = useContext(FileUploaderControlContext).files;
    var cx = useEmotion().cx;
    var jsStyles = useStyles(getJsStyles);
    var jsRowStyles = useStyles(getJsRowStyles);
    var jsTileStyles = useStyles(getJsTileStyles);
    var theme = useContext(ThemeContext);
    var locale = useControlLocale();
    var langCode = useContext(LocaleContext).langCode;
    var _e = useState(null), focusedByTab = _e[0], setFocusedByTab = _e[1];
    var _f = useState(null), hovered = _f[0], setHovered = _f[1];
    var mouseIsOverRef = useRef(false);
    var handleMouseEnter = function (index) {
        setHovered(index);
        mouseIsOverRef.current = true;
    };
    var handleMouseLeave = function () {
        setHovered(null);
        mouseIsOverRef.current = false;
    };
    var handleRemoveItem = function (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 = 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 () {
        if (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 (React.createElement("div", { className: cx(jsStyles.summary(theme), summaryClass) },
            errorLength > 0 && (React.createElement("span", { className: jsStyles.summaryErrorText(theme) },
                errorLength,
                "\u00A0",
                pluralize.apply(void 0, __spreadArray([langCode, errorLength], locale.errors, false)))),
            warningLength > 0 && (React.createElement("span", { className: jsStyles.summaryWarningText(theme) },
                warningLength,
                "\u00A0",
                pluralize.apply(void 0, __spreadArray([langCode, warningLength], locale.warnings, false))))));
    };
    return (React.createElement("div", { "data-tid": FileUploaderFileDataTids.fileList, className: jsViewStyles.fileListWrapper(theme) },
        renderSummary(),
        files.map(function (file, idx) {
            var _a, _b, _c, _d, _e;
            var _f, _g, _h, _j;
            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, __assign(__assign(__assign(__assign((_a = {}, _a[jsStyles.fileWrapperFocus(theme)] = hasFocus, _a[jsStyles.fileWrapperHover(theme)] = hasHover, _a), (hasError && (_b = {},
                _b[jsStyles.errorFile(theme)] = !isTileView || hasHover,
                _b[jsViewStyles.errorFileFocus(theme)] = hasFocus,
                _b))), (!isTileView &&
                hasError && (_c = {},
                _c[jsStyles.removeBorderTopRadius()] = ((_f = files[idx - 1]) === null || _f === void 0 ? void 0 : _f.status) === FileUploaderFileStatus.Error,
                _c[jsStyles.removeBorderBottomRadius()] = ((_g = files[idx + 1]) === null || _g === void 0 ? void 0 : _g.status) === FileUploaderFileStatus.Error,
                _c))), (hasWarning && (_d = {},
                _d[jsStyles.warningFile(theme)] = !isTileView || hasHover,
                _d[jsViewStyles.warningFileFocus(theme)] = hasFocus,
                _d))), (!isTileView &&
                hasWarning && (_e = {},
                _e[jsStyles.removeBorderTopRadius()] = ((_h = files[idx - 1]) === null || _h === void 0 ? void 0 : _h.status) === FileUploaderFileStatus.Warning,
                _e[jsStyles.removeBorderBottomRadius()] = ((_j = files[idx + 1]) === null || _j === void 0 ? void 0 : _j.status) === FileUploaderFileStatus.Warning,
                _e))));
            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(fileProps);
            return (React.createElement("div", { key: file.id, className: fileWrapperClassNames, onMouseEnter: function () { return handleMouseEnter(file.id); }, onMouseLeave: function () { return handleMouseLeave(); }, onFocus: function () { return setFocusedByTab(file.id); }, onBlur: function () { return setFocusedByTab(null); } },
                React.createElement("div", { className: jsViewStyles.file() }, fileElement)));
        })));
};
FileUploaderFileList.__KONTUR_REACT_UI__ = 'FileUploaderFileList';
FileUploaderFileList.displayName = 'FileUploaderFileList';
//# sourceMappingURL=FileUploaderFileList.js.map