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());
    });
};
import React from 'react';
import p from 'prefix-classname';
import { cloneDeep, isMatch } from 'lodash-es';
import { Button, Empty, Form, Tabs, Tooltip, Typography } from 'antd';
import { NumberOutlined } from '@ant-design/icons';
import { CLS_PREFIX, useSelectedNode } from '../../../config/const';
import './style.scss';
import { useShared } from '@rcp/use.shared';
import usePersistFn from '@rcp/use.persistfn';
import { PreventFastClick } from '@rcp/c.preventfastop';
import { OpType } from '@mometa/fs-handler/const';
import { CodeEditor } from '../../../../shared/code-editor';
import { createPreload } from '../../utils/utils';
const cn = p('');
const c = p(`${CLS_PREFIX}-rpanel`);
const BaseInfoForm = () => {
    var _a, _b;
    const [selectedNode] = useSelectedNode();
    const mometaData = (_a = selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.__mometa) === null || _a === void 0 ? void 0 : _a.getMometaData();
    const [form] = Form.useForm();
    const [api] = useShared('api');
    const UpdateBtn = React.useCallback(({ onClick, loading, disabled }) => (React.createElement(Tooltip, { title: disabled && '未发生更改，不能修改' },
        React.createElement(Button, { disabled: disabled, type: 'primary', onClick: onClick, loading: loading }, "\u66F4\u65B0"))), []);
    React.useLayoutEffect(() => {
        if (form && mometaData) {
            form.setFieldsValue(cloneDeep(mometaData));
        }
    }, [form, mometaData]);
    const onUpdate = usePersistFn(() => __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: OpType.REPLACE_NODE,
                preload: 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: OpType.REPLACE_NODE,
                preload: Object.assign(Object.assign({}, mometaData), { data: {
                        newText: editData.text
                    } })
            });
        }
    }));
    if (!mometaData) {
        return null;
    }
    return (React.createElement(Form, { layout: 'vertical', form: form, onFieldsChange: () => {
            // !isDirty && setIsDirty(true)
        } },
        React.createElement(Form.Item, { label: '类型' },
            React.createElement(Typography.Title, { level: 5 },
                React.createElement(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.createElement(NumberOutlined, { style: { marginRight: 2 } }),
                    mometaData.name))),
        React.createElement(Form.Item, { name: 'text', label: '代码' },
            React.createElement(CodeEditor, { language: 'typescript', height: '200px' })),
        !!((_b = mometaData === null || mometaData === void 0 ? void 0 : mometaData.container) === null || _b === void 0 ? void 0 : _b.text) && (React.createElement(Form.Item, { name: ['container', 'text'], label: '容器代码', tooltip: '修改将以容器代码为主，代码修改视为无效' },
            React.createElement(CodeEditor, { language: 'typescript', height: '100px' }))),
        React.createElement("div", { className: c('__btns') },
            React.createElement(Form.Item, { noStyle: true, shouldUpdate: true }, ({ getFieldsValue }) => {
                const editData = getFieldsValue();
                return (React.createElement(PreventFastClick, { onClick: onUpdate },
                    React.createElement(UpdateBtn, { disabled: isMatch(mometaData, editData) })));
            }))));
};
const MetaInfo = () => {
    var _a;
    const [selectedNode] = 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.createElement(CodeEditor, { readOnly: true, height: '500px', language: 'json', value: JSON.stringify(mometaData, null, 2) });
};
const RightPanel = React.memo(({ className }) => {
    var _a;
    const [selectedNode] = 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.createElement("div", { className: cn(c(), className) }, !!mometaData ? (React.createElement(Tabs, { className: c('__tabs') },
        React.createElement(Tabs.TabPane, { key: 'attr', tab: '属性' },
            React.createElement(BaseInfoForm, null)),
        React.createElement(Tabs.TabPane, { key: 'meta', tab: '元信息' },
            React.createElement(MetaInfo, null)))) : (React.createElement(Empty, { description: '请选中编辑元素', style: { paddingTop: 40 } }))));
});
RightPanel.defaultProps = {};
export default RightPanel;
//# sourceMappingURL=index.js.map