"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const prefix_classname_1 = __importDefault(require("prefix-classname"));
const lodash_es_1 = require("lodash-es");
const antd_1 = require("antd");
const icons_1 = require("@ant-design/icons");
const const_1 = require("../../../config/const");
require("./style.scss");
const use_shared_1 = require("@rcp/use.shared");
const use_persistfn_1 = __importDefault(require("@rcp/use.persistfn"));
const c_preventfastop_1 = require("@rcp/c.preventfastop");
const const_2 = require("@mometa/fs-handler/const");
const code_editor_1 = require("../../../../shared/code-editor");
const utils_1 = require("../../utils/utils");
const cn = (0, prefix_classname_1.default)('');
const c = (0, prefix_classname_1.default)(`${const_1.CLS_PREFIX}-rpanel`);
const BaseInfoForm = () => {
    var _a, _b;
    const [selectedNode] = (0, const_1.useSelectedNode)();
    const mometaData = (_a = selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.__mometa) === null || _a === void 0 ? void 0 : _a.getMometaData();
    const [form] = antd_1.Form.useForm();
    const [api] = (0, use_shared_1.useShared)('api');
    const UpdateBtn = react_1.default.useCallback(({ onClick, loading, disabled }) => (react_1.default.createElement(antd_1.Tooltip, { title: disabled && '未发生更改，不能修改' },
        react_1.default.createElement(antd_1.Button, { disabled: disabled, type: 'primary', onClick: onClick, loading: loading }, "\u66F4\u65B0"))), []);
    react_1.default.useLayoutEffect(() => {
        if (form && mometaData) {
            form.setFieldsValue((0, lodash_es_1.cloneDeep)(mometaData));
        }
    }, [form, mometaData]);
    const onUpdate = (0, use_persistfn_1.default)(() => __awaiter(void 0, void 0, void 0, function* () {
        var _c, _d, _e, _f;
        const editData = form.getFieldsValue();
        if (((_c = mometaData.container) === null || _c === void 0 ? void 0 : _c.text) && ((_d = editData.container) === null || _d === void 0 ? void 0 : _d.text) !== ((_e = mometaData.container) === null || _e === void 0 ? void 0 : _e.text)) {
            yield api.submitOperation({
                type: const_2.OpType.REPLACE_NODE,
                preload: (0, utils_1.createPreload)(mometaData, Object.assign(Object.assign({}, mometaData.container), { data: {
                        newText: (_f = editData.container) === null || _f === void 0 ? void 0 : _f.text
                    } }))
            });
        }
        else {
            yield api.submitOperation({
                type: const_2.OpType.REPLACE_NODE,
                preload: Object.assign(Object.assign({}, mometaData), { data: {
                        newText: editData.text
                    } })
            });
        }
    }));
    if (!mometaData) {
        return null;
    }
    return (react_1.default.createElement(antd_1.Form, { layout: 'vertical', form: form, onFieldsChange: () => {
            // !isDirty && setIsDirty(true)
        } },
        react_1.default.createElement(antd_1.Form.Item, { label: '类型' },
            react_1.default.createElement(antd_1.Typography.Title, { level: 5 },
                react_1.default.createElement(antd_1.Typography.Link, { title: '点击进入代码', onClick: () => {
                        var _a, _b;
                        return api.openEditor({
                            fileName: mometaData.filename,
                            lineNumber: (_a = mometaData.start) === null || _a === void 0 ? void 0 : _a.line,
                            colNumber: (_b = mometaData.start) === null || _b === void 0 ? void 0 : _b.column
                        });
                    } },
                    react_1.default.createElement(icons_1.NumberOutlined, { style: { marginRight: 2 } }),
                    mometaData.name))),
        react_1.default.createElement(antd_1.Form.Item, { name: 'text', label: '代码' },
            react_1.default.createElement(code_editor_1.CodeEditor, { language: 'typescript', height: '200px' })),
        !!((_b = mometaData === null || mometaData === void 0 ? void 0 : mometaData.container) === null || _b === void 0 ? void 0 : _b.text) && (react_1.default.createElement(antd_1.Form.Item, { name: ['container', 'text'], label: '容器代码', tooltip: '修改将以容器代码为主，代码修改视为无效' },
            react_1.default.createElement(code_editor_1.CodeEditor, { language: 'typescript', height: '100px' }))),
        react_1.default.createElement("div", { className: c('__btns') },
            react_1.default.createElement(antd_1.Form.Item, { noStyle: true, shouldUpdate: true }, ({ getFieldsValue }) => {
                const editData = getFieldsValue();
                return (react_1.default.createElement(c_preventfastop_1.PreventFastClick, { onClick: onUpdate },
                    react_1.default.createElement(UpdateBtn, { disabled: (0, lodash_es_1.isMatch)(mometaData, editData) })));
            }))));
};
const MetaInfo = () => {
    var _a;
    const [selectedNode] = (0, const_1.useSelectedNode)();
    const mometaData = (_a = selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.__mometa) === null || _a === void 0 ? void 0 : _a.getMometaData();
    if (!mometaData) {
        return null;
    }
    return react_1.default.createElement(code_editor_1.CodeEditor, { readOnly: true, height: '500px', language: 'json', value: JSON.stringify(mometaData, null, 2) });
};
const RightPanel = react_1.default.memo(({ className }) => {
    var _a;
    const [selectedNode] = (0, const_1.useSelectedNode)();
    const mometaData = (selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.parentNode) && ((_a = selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.__mometa) === null || _a === void 0 ? void 0 : _a.getMometaData());
    return (react_1.default.createElement("div", { className: cn(c(), className) }, !!mometaData ? (react_1.default.createElement(antd_1.Tabs, { className: c('__tabs') },
        react_1.default.createElement(antd_1.Tabs.TabPane, { key: 'attr', tab: '属性' },
            react_1.default.createElement(BaseInfoForm, null)),
        react_1.default.createElement(antd_1.Tabs.TabPane, { key: 'meta', tab: '元信息' },
            react_1.default.createElement(MetaInfo, null)))) : (react_1.default.createElement(antd_1.Empty, { description: '请选中编辑元素', style: { paddingTop: 40 } }))));
});
RightPanel.defaultProps = {};
exports.default = RightPanel;
//# sourceMappingURL=index.js.map