"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");
/* Create a new project.
 */
const react_1 = require("react");
const antd_1 = require("antd");
const loading_1 = __importDefault(require("components/share/loading"));
const A_1 = __importDefault(require("components/misc/A"));
const icon_1 = require("@cocalc/frontend/components/icon");
const post_1 = __importDefault(require("lib/api/post"));
const edit_url_1 = __importDefault(require("lib/share/edit-url"));
function CreateProject({ label, image, defaultTitle, start, onCreate, public_path_id, }) {
    const [title, setTitle] = (0, react_1.useState)(defaultTitle ?? "");
    const [project_id, setProjectID] = (0, react_1.useState)("");
    const [error, setError] = (0, react_1.useState)("");
    const [state, setState] = (0, react_1.useState)("config");
    async function create(title) {
        setError("");
        setState("creating");
        try {
            const response = await (0, post_1.default)("/projects/create", {
                title,
                image,
                public_path_id,
            });
            if (response.error) {
                throw Error(response.error);
            }
            if (start) {
                setState("starting");
                await (0, post_1.default)("/projects/start", { project_id: response.project_id });
            }
            setProjectID(response.project_id);
            setState("created");
            onCreate({ project_id: response.project_id, title });
        }
        catch (err) {
            setState("config");
            setError(`${err}`);
        }
    }
    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(antd_1.Divider, { style: { color: "#666" }, children: label ?? "Create a Project" }), (0, jsx_runtime_1.jsxs)(antd_1.Space, { direction: "vertical", style: { width: "100%" }, children: [error && (0, jsx_runtime_1.jsx)(antd_1.Alert, { type: "error", message: error, showIcon: true }), state == "creating" && ((0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center" }, children: (0, jsx_runtime_1.jsxs)(loading_1.default, { style: { fontSize: "16pt" }, children: ["Creating project \"", title, "\"..."] }) })), state == "starting" && ((0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center" }, children: (0, jsx_runtime_1.jsxs)(loading_1.default, { style: { fontSize: "16pt" }, children: ["Starting project \"", title, "\"..."] }) })), state == "created" && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { name: "check", style: { color: "darkgreen", fontSize: "16pt" } }), " ", "Created project", " ", project_id && title ? ((0, jsx_runtime_1.jsx)(A_1.default, { href: (0, edit_url_1.default)({
                                    type: "collaborator",
                                    project_id,
                                }), external: true, children: title })) : (""), "."] })), (0, jsx_runtime_1.jsx)(antd_1.Input, { allowClear: true, defaultValue: defaultTitle, disabled: state != "config", placeholder: "Project title (easily change this at any time)", onChange: (e) => setTitle(e.target.value), onPressEnter: (e) => {
                            e.preventDefault();
                            create(title);
                        } }), state == "config" && ((0, jsx_runtime_1.jsxs)(antd_1.Button, { disabled: !title || state != "config", type: title ? "primary" : undefined, onClick: () => create(title), children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { name: "plus-circle" }), " Create New Project"] }))] })] }));
}
exports.default = CreateProject;
//# sourceMappingURL=create.js.map