"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
/*
Show directory in a project based on cached information
in the database.
*/
const react_1 = require("react");
const database_1 = __importDefault(require("lib/hooks/database"));
const antd_1 = require("antd");
const loading_1 = __importDefault(require("components/share/loading"));
const edit_url_1 = __importDefault(require("lib/share/edit-url"));
const cmp_1 = require("@cocalc/util/cmp");
const misc_1 = require("@cocalc/util/misc");
const A_1 = __importDefault(require("components/misc/A"));
const path_1 = require("path");
const file_associations_1 = require("@cocalc/frontend/file-associations");
const icon_1 = require("@cocalc/frontend/components/icon");
const misc_2 = require("@cocalc/util/misc");
function getQuery(project_id, path) {
    return {
        listings: { project_id, path, listing: null },
    };
}
function Listing({ project_id, path, title, update, sort, }) {
    const { error, value, loading, query } = (0, database_1.default)(getQuery(project_id, path));
    (0, react_1.useEffect)(() => {
        // update the listing whenever "update" changes.
        query(getQuery(project_id, path));
    }, [update, project_id, path]);
    return ((0, jsx_runtime_1.jsxs)("div", { children: [loading && (0, jsx_runtime_1.jsx)(loading_1.default, {}), error && (0, jsx_runtime_1.jsx)(antd_1.Alert, { type: "error", message: error, showIcon: true }), !loading && !error && ((0, jsx_runtime_1.jsx)(FileList, { listing: value.listings?.listing ?? [], project_id: project_id, path: path, title: title, sort: sort }))] }));
}
exports.default = Listing;
function FileList({ listing, project_id, path, title, sort }) {
    let c;
    if (sort == "time") {
        c = (a, b) => (0, cmp_1.cmp)(b.mtime, a.mtime);
    }
    else if (sort == "size") {
        c = (a, b) => (0, cmp_1.cmp)(a.size, b.size);
    }
    else {
        c = (a, b) => (0, cmp_1.cmp)(a.name.toLowerCase(), b.name.toLowerCase());
    }
    const dataSource = listing
        .filter((entry) => !entry.name.startsWith("."))
        .sort(c);
    const columns = [
        {
            title: "Type",
            dataIndex: "isdir",
            key: "isdir",
            render: (isdir, entry) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { name: isdir
                            ? "folder"
                            : file_associations_1.file_associations[(0, misc_1.filename_extension)(entry.name)]?.icon ??
                                file_associations_1.file_associations[""]?.icon }), isdir && (0, jsx_runtime_1.jsx)(icon_1.Icon, { name: "caret-right" })] })),
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
            render: (_, entry) => ((0, jsx_runtime_1.jsx)(A_1.default, { href: (0, edit_url_1.default)({ project_id, path: (0, path_1.join)(path, entry.name) }), external: true, children: entry.name })),
        },
        {
            title: "Date Modified",
            dataIndex: "mtime",
            key: "mtime",
            render: (mtime) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: new Date(mtime * 1000).toLocaleString() }),
        },
        {
            title: "Size",
            dataIndex: "size",
            key: "size",
            render: (size, { isdir }) => isdir ? `${size} ${(0, misc_2.plural)(size, "item")}` : (0, misc_2.human_readable_size)(size),
        },
    ];
    return ((0, jsx_runtime_1.jsxs)(antd_1.Card, { style: { boxShadow: "4px 4px 2px #ddd" }, title: title ? ((0, jsx_runtime_1.jsxs)("div", { children: ["Title: ", (0, jsx_runtime_1.jsx)(A_1.default, { external: true, href: (0, edit_url_1.default)({
                        type: "collaborator",
                        project_id,
                    }), children: title })] })) : ("Directory Listing"), children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "11pt", marginBottom: "10px" }, children: path ? path : "Home Directory" }), (0, jsx_runtime_1.jsx)(antd_1.Table, { dataSource: dataSource, columns: columns, style: { width: "100%" }, pagination: { hideOnSinglePage: true }, rowKey: "name" })] }));
}
//# sourceMappingURL=listing.js.map