export function createWikiDecoratorEditorTemplate(title: string) {
  return `import React, { useEffect, useLayoutEffect, useMemo, useRef } from 'react'
import ReactDOM from 'react-dom'
import { ConfigProvider, Tabs } from '@ones-design/core'
import { lifecycle, OPProvider } from '@ones-open/bridge'
import type { EditorBlockConfig, EditorBlockProps, MFInsertBlockData } from '@ones-open/editor'
import { RenderEditorBlock, useDefaultEditor, useDefaultEditorTools, useRegisterCommand } from '@ones-open/editor'
import './index.css'
function BlockTabs(props: EditorBlockProps) {
  const editor = useDefaultEditor()
  const containerRef = useRef<HTMLDivElement>(null)
  const tabsInfo = useMemo(() => {
    return props.blockData.children.map((item) => {
      return {
        key: item,
        label: props.blockData.pluginInfo.data[0],
      }
    })
  }, [props.blockData.children, props.blockData.pluginInfo.data])
  useLayoutEffect(() => {
    editor.createChildContainer(props.path, containerRef.current, props.blockData.children[0])
  }, [editor, props.blockData.children, props.path])
  return (
    <>
      <Tabs tabs={tabsInfo} activeTabKey={tabsInfo[0].key} />
      <div ref={containerRef}></div>
    </>
  )
}
const config: EditorBlockConfig = {
  '${title}': {
    render: BlockTabs,
    icon: './logo.svg',
    name: '${title}',
  },
}
function App() {
  const registerCommand = useRegisterCommand()
  const editor = useDefaultEditor()
  const tools = useDefaultEditorTools()
  useEffect(() => {
    registerCommand({
      commandItems: [
        {
          id: 'tabs',
          name: 'tabs',
          icon: './logo.svg',
          subText: '/tabs',
        },
      ],
      async executeCommand(options) {
        let containerId: string | undefined
        let blockIndex = 0
        if (options.params.from === 'quick-menu' || options.params.from === 'add-block-menu') {
          const block = editor.getBlockById(options.params.blockId)
          const container = editor.getParentContainer(block)
          containerId = tools.getContainerId(container)
          blockIndex = editor.getBlockIndex(block)
        }
        if (options.params.from === 'block-menu') {
          // Please implement the logic
          return
        }
        if (options.item.id === 'tabs') {
          const blockData: MFInsertBlockData = {
            type: '${title}',
            children: [tools.createEmptyContainer()],
            data: ['tab1'],
            exportSpec: [
              {
                type: 'text',
                data: 'tab1',
              },
              {
                type: 'block',
                data: [],
              },
            ],
          }
          return editor.insertBlock(containerId, blockIndex, blockData)
        }
      },
    })
  }, [editor, registerCommand, tools])
  return (
    <>
      <RenderEditorBlock config={config} />
    </>
  )
}
ReactDOM.render(
  <ConfigProvider>
    <OPProvider>
      <App />
    </OPProvider>
  </ConfigProvider>,
  document.getElementById('ones-mf-root')
)
lifecycle.onDestroy(() => {
  ReactDOM.unmountComponentAtNode(document.getElementById('ones-mf-root'))
})
`
}