"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");
/*
Edit some very basic configuration of a project, mainly that is relevant for sharing for now,
but maybe later everything.
*/
const react_1 = require("react");
const router_1 = require("next/router");
const antd_1 = require("antd");
const icon_1 = require("@cocalc/frontend/components/icon");
const edit_row_1 = __importDefault(require("components/misc/edit-row"));
const save_button_1 = __importDefault(require("components/misc/save-button"));
function Edit(props) {
    const router = (0, router_1.useRouter)();
    const [expanded, setExpanded] = (0, react_1.useState)(!!router.query.edit);
    return ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "15px" }, children: [(0, jsx_runtime_1.jsxs)(antd_1.Button, { disabled: expanded, onClick: (e) => {
                    e.preventDefault();
                    setExpanded(true);
                }, size: "small", children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { name: "pencil" }), " Edit..."] }, "edit"), expanded && ((0, jsx_runtime_1.jsx)(EditFields, { info: props, onClose: () => {
                    setExpanded(false);
                    // This reloads the page, but with no flicker, so user sees new information reflected.
                    router.push({ pathname: router.asPath.split("?")[0] });
                } }))] }));
}
exports.default = Edit;
function EditFields({ info, onClose, }) {
    const [edited, setEdited] = (0, react_1.useState)(info);
    const [original, setOriginal] = (0, react_1.useState)(info);
    return ((0, jsx_runtime_1.jsxs)("div", { style: {
            width: "100%",
            border: "1px solid #eee",
            padding: "15px",
            marginTop: "15px",
        }, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(antd_1.Space, { style: { float: "right" }, children: [(0, jsx_runtime_1.jsx)(save_button_1.default, { edited: edited, original: original, setOriginal: setOriginal, table: "projects" }), (0, jsx_runtime_1.jsx)(antd_1.Button, { style: { float: "right" }, onClick: onClose, children: "Close" })] }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(edit_row_1.default, { label: "Title", children: (0, jsx_runtime_1.jsx)(antd_1.Input, { value: edited.title, onChange: (e) => setEdited({ ...edited, title: e.target.value }) }) }), (0, jsx_runtime_1.jsx)(edit_row_1.default, { label: "Description", children: (0, jsx_runtime_1.jsx)(antd_1.Input.TextArea, { value: edited.description, onChange: (e) => setEdited({ ...edited, description: e.target.value }), autoSize: { minRows: 2 } }) }), (0, jsx_runtime_1.jsx)(edit_row_1.default, { label: "Name (for nicer URLs)", children: (0, jsx_runtime_1.jsx)(antd_1.Input, { value: edited.name, onChange: (e) => setEdited({ ...edited, name: e.target.value }) }) })] }));
}
//# sourceMappingURL=edit.js.map