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 __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import styles from '@procore/core-css/src/components/_file_list.scss';
import classnames from 'classnames/bind';
import React from 'react';
import { useOverflowObserver } from '../../effects/OverflowObserver';
import { useI18nContext } from '../../state/I18n';
import { parseFilename } from '../../utils/filename';
import { Tooltip } from '../Tooltip';
var cx = classnames.bind(styles);
var THRESHOLD = 99;
/**

 @since 10.19.0

 @see [Storybook](https://procore.github.io/core/latest/?path=/story/filelist--hover-on-file-with-extension)

 */
export var FileList = React.forwardRef(function FileList(_a, ref) {
    var items = _a.items, downloadAllUrl = _a.downloadAllUrl, className = _a.className, qa = _a.qa, props = __rest(_a, ["items", "downloadAllUrl", "className", "qa"]);
    var I18n = useI18nContext();
    var length = items.length;
    var isDownloadAllVisible = length > 1;
    if (length === 0) {
        return null;
    }
    if (isDownloadAllVisible && !downloadAllUrl) {
        console.warn('FileList: "downloadAllUrl" is not provided');
    }
    return (React.createElement("div", __assign({ ref: ref, className: cx('file-list', className) }, props),
        isDownloadAllVisible && (React.createElement("div", { className: cx('file-list__download-all') },
            React.createElement("a", { className: cx('file-list__download-all-link'), href: downloadAllUrl },
                I18n.t('core.fileList.downloadAll'),
                ' ', "(".concat(length > THRESHOLD ? "".concat(THRESHOLD, "+") : length, ")")))),
        items.map(function (_a) {
            var _b;
            var name = _a.name, url = _a.url;
            return (React.createElement(Item, { key: "".concat(name, "-").concat(url), name: name, url: url, "data-qa": (_b = qa === null || qa === void 0 ? void 0 : qa.item) === null || _b === void 0 ? void 0 : _b.call(qa, { name: name, url: url }) }));
        })));
});
function Item(_a) {
    var url = _a.url, name = _a.name, props = __rest(_a, ["url", "name"]);
    var _b = parseFilename(name), filename = _b.filename, extension = _b.extension, isFilename = _b.isFilename;
    var _c = useOverflowObserver(), isOverflowingX = _c.isOverflowingX, ref = _c.ref;
    var body = isFilename ? "".concat(filename, ".") : name;
    return (React.createElement("div", __assign({ className: cx('file-list__item') }, props),
        React.createElement(Tooltip, { placement: "right", overlay: name, trigger: isOverflowingX ? 'hover' : 'none', showKeys: [] },
            React.createElement("div", { tabIndex: 0, className: cx('file-list__preview') },
                React.createElement("span", { ref: ref, className: cx('file-list__preview-text-body') }, body),
                isFilename && (React.createElement("span", { className: cx('file-list__preview-text-extension') }, extension)))),
        React.createElement("a", { href: url, className: cx('file-list__item-download') },
            React.createElement(DownloadIcon, null))));
}
function DownloadIcon() {
    return (React.createElement("svg", { width: "16", height: "16", fill: "none", xmlns: "http://www.w3.org/2000/svg", focusable: false },
        React.createElement("path", { d: "M14.5 14.5h-13V11h-1v4.5h15V11h-1v3.5z", fill: "#006DDF" }),
        React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.5 10.293V2h1v8.293l3.146-3.147.707.708L8 12.207 3.646 7.854l.708-.708L7.5 10.293z", fill: "#006DDF" })));
}
//# sourceMappingURL=FileList.js.map