import { jsx, jsxs } from "react/jsx-runtime";
import { useContext, useState } from "react";
import { PageHeader } from "@ant-design/pro-layout";
import { Input, Spin } from "antd";
import { useNavigate, useParams } from "react-router-dom";
import { useRequest, useSchemaTemplateManager } from "../index.mjs";
import { RemoteSchemaComponent, SchemaComponentContext } from "../schema-component/index.mjs";
const EditableTitle = (props)=>{
    const [title, setTitle] = useState(props.title);
    const [visible, setVisible] = useState(false);
    const { refresh } = useSchemaTemplateManager();
    const { run } = useRequest({
        resource: 'uiSchemaTemplates',
        action: 'update',
        params: {
            filterByTk: props.filterByTk
        }
    }, {
        manual: true,
        debounceWait: 500,
        onSuccess () {
            refresh();
        }
    });
    return /*#__PURE__*/ jsx("div", {
        children: visible ? /*#__PURE__*/ jsx(Input, {
            defaultValue: title,
            size: 'large',
            onBlur: ()=>{
                setVisible(false);
            },
            onChange: (e)=>{
                setTitle(e.target.value);
                run({
                    filterByTk: props.filterByTk,
                    values: {
                        name: e.target.value
                    }
                });
            }
        }) : /*#__PURE__*/ jsx("div", {
            onClick: ()=>{
                setVisible(true);
            },
            children: title || /*#__PURE__*/ jsx("span", {
                style: {
                    color: '#bbb'
                },
                children: "\u672A\u547D\u540D"
            })
        })
    });
};
const BlockTemplateDetails = ()=>{
    var _data_data, _data_data1;
    const navigate = useNavigate();
    const params = useParams();
    const key = null == params ? void 0 : params.key;
    const value = useContext(SchemaComponentContext);
    const { data, loading } = useRequest({
        resource: 'uiSchemaTemplates',
        action: 'get',
        params: {
            filterByTk: key
        }
    });
    if (loading) return /*#__PURE__*/ jsx(Spin, {});
    return /*#__PURE__*/ jsxs("div", {
        children: [
            /*#__PURE__*/ jsx(PageHeader, {
                style: {
                    backgroundColor: 'white'
                },
                onBack: ()=>{
                    navigate('/admin/plugins/block-templates');
                },
                ghost: false,
                title: /*#__PURE__*/ jsx(EditableTitle, {
                    filterByTk: key,
                    title: null == data ? void 0 : null == (_data_data = data.data) ? void 0 : _data_data.name
                })
            }),
            /*#__PURE__*/ jsx("div", {
                style: {
                    margin: 'var(--tb-spacing)'
                },
                children: /*#__PURE__*/ jsx(SchemaComponentContext.Provider, {
                    value: {
                        ...value,
                        designable: true
                    },
                    children: /*#__PURE__*/ jsx(RemoteSchemaComponent, {
                        uid: null == data ? void 0 : null == (_data_data1 = data.data) ? void 0 : _data_data1.uid
                    })
                })
            })
        ]
    });
};
export { BlockTemplateDetails };
