"use strict";
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 __values = (this && this.__values) || function(o) {
    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
    if (m) return m.call(o);
    if (o && typeof o.length === "number") return {
        next: function () {
            if (o && i >= o.length) o = void 0;
            return { value: o && o[i++], done: !o };
        }
    };
    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var jsx_runtime_1 = require("react/jsx-runtime");
/* Select one of the projects the signed in user is a collaborator on. */
var react_1 = require("react");
var database_1 = __importDefault(require("lib/hooks/database"));
var antd_1 = require("antd");
var loading_1 = __importDefault(require("components/share/loading"));
var cmp_1 = require("@cocalc/util/cmp");
function SelectProject(_a) {
    var label = _a.label, onChange = _a.onChange;
    var _b = (0, database_1.default)({
        projects: [{ title: null, project_id: null, last_edited: null }],
    }), error = _b.error, value = _b.value, loading = _b.loading;
    var projects = (0, react_1.useMemo)(function () {
        var e_1, _a;
        if (loading) {
            return [];
        }
        var cmp = (0, cmp_1.field_cmp)("last_edited");
        value.projects.sort(function (a, b) { return cmp(b, a); }); // so newest first
        var v = [];
        try {
            for (var _b = __values(value.projects), _c = _b.next(); !_c.done; _c = _b.next()) {
                var x = _c.value;
                v.push({
                    label: x.title,
                    value: JSON.stringify({ project_id: x.project_id, title: x.title }),
                });
            }
        }
        catch (e_1_1) { e_1 = { error: e_1_1 }; }
        finally {
            try {
                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
            }
            finally { if (e_1) throw e_1.error; }
        }
        return v;
    }, [loading]);
    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(antd_1.Divider, __assign({ style: { color: "#666" } }, { children: label !== null && label !== void 0 ? label : "Select a Project" })), (0, jsx_runtime_1.jsxs)(antd_1.Space, __assign({ direction: "vertical", style: { width: "100%" } }, { children: [error && (0, jsx_runtime_1.jsx)(antd_1.Alert, { type: "error", message: error, showIcon: true }), loading && (0, jsx_runtime_1.jsx)(loading_1.default, { style: { fontSize: "24pt" } }), !loading &&
                        (!error && value && projects.length > 0 ? ((0, jsx_runtime_1.jsx)(antd_1.Select, { showSearch: true, style: { width: "100%" }, placeholder: "Select a project...", optionFilterProp: "label", options: projects, onChange: function (x) { return (x ? onChange(JSON.parse("".concat(x))) : undefined); } })) : ((0, jsx_runtime_1.jsx)("div", { children: "You do not have any projects yet." })))] }))] }));
}
exports.default = SelectProject;
//# sourceMappingURL=select.js.map