import { defineComponent } from 'vue'
import { useUiTheme } from '../theme'
import { renderMcpSettingsDialog } from './mcp-settings-dialog/render'

export const DimSdkMcpSettingsDialog = defineComponent({
  name: 'DimSdkMcpSettingsDialog',
  props: {
    modelValue: { type: Boolean, required: true },
    w: { type: Number, default: 72 },
    h: { type: Number, default: 24 },
    backdrop: { type: Boolean, default: false },
    mcpJsonFilePath: { type: String, required: true },
    serverCount: { type: Number, required: true },
    testStatus: { type: Object, required: true },
  },
  emits: {
    'update:modelValue': (_v: boolean) => true,
    openFile: () => true,
    reload: () => true,
    test: () => true,
    close: () => true,
  },
  setup(props, { emit }) {
    const ui = useUiTheme()
    return () => {
      return renderMcpSettingsDialog(
        {
          modelValue: props.modelValue,
          w: props.w,
          h: props.h,
          backdrop: props.backdrop,
          mcpJsonFilePath: props.mcpJsonFilePath,
          serverCount: props.serverCount,
          testStatus: props.testStatus as any,
        },
        {
          updateModelValue: (v: boolean) => emit('update:modelValue', v),
          openFile: () => emit('openFile'),
          reload: () => emit('reload'),
          test: () => emit('test'),
          close: () => emit('close'),
        },
        ui,
      )
    }
  },
})
