import type { PropType } from 'vue'
import { defineComponent, ref, watch } from 'vue'
import { useUiTheme } from '../theme'
import { renderConfigDialog } from './config-dialog/render'

type ConfigDialogFocusedField =
  | 'contextWindow'
  | 'maxTokens'
  | 'temperature'
  | 'shortcutCommands'
  | 'shortcutTimeline'
  | 'shortcutNewSession'

export const DimSdkConfigDialog = defineComponent({
  name: 'DimSdkConfigDialog',
  props: {
    modelValue: { type: Boolean, required: true },
    w: { type: Number, default: 74 },
    h: { type: Number, default: 20 },
    backdrop: { type: Boolean, default: false },
    showToast: {
      type: Function as PropType<((text: string) => void) | undefined>,
      default: undefined,
    },
    contextWindow: { type: String, required: true },
    contextWindowLocked: { type: Boolean, default: false },
    maxTokens: { type: String, required: true },
    temperature: { type: String, required: true },
    interleavedThinking: { type: Boolean, required: true },
    interleavedThinkingLocked: { type: Boolean, default: false },
    shortcutCommands: { type: String, required: true },
    shortcutTimeline: { type: String, required: true },
    shortcutNewSession: { type: String, required: true },
  },
  emits: {
    'update:modelValue': (_v: boolean) => true,
    'update:contextWindow': (_v: string) => true,
    'update:maxTokens': (_v: string) => true,
    'update:temperature': (_v: string) => true,
    'update:interleavedThinking': (_v: boolean) => true,
    'update:shortcutCommands': (_v: string) => true,
    'update:shortcutTimeline': (_v: string) => true,
    'update:shortcutNewSession': (_v: string) => true,
    apply: () => true,
    cancel: () => true,
  },
  setup(props, { emit }) {
    const ui = useUiTheme()
    const focusedField = ref<ConfigDialogFocusedField | null>(null)

    watch(
      () => props.modelValue,
      (open) => {
        focusedField.value = open ? 'contextWindow' : null
      },
      { immediate: true },
    )

    return () => {
      return renderConfigDialog(
        {
          modelValue: props.modelValue,
          w: props.w,
          h: props.h,
          backdrop: props.backdrop,
          showToast: props.showToast,
          contextWindow: props.contextWindow,
          contextWindowLocked: props.contextWindowLocked,
          maxTokens: props.maxTokens,
          temperature: props.temperature,
          interleavedThinking: props.interleavedThinking,
          interleavedThinkingLocked: props.interleavedThinkingLocked,
          shortcutCommands: props.shortcutCommands,
          shortcutTimeline: props.shortcutTimeline,
          shortcutNewSession: props.shortcutNewSession,
          focusedField: focusedField.value,
        },
        {
          updateModelValue: (v: boolean) => emit('update:modelValue', v),
          updateContextWindow: (v: string) => emit('update:contextWindow', v),
          updateMaxTokens: (v: string) => emit('update:maxTokens', v),
          updateTemperature: (v: string) => emit('update:temperature', v),
          updateInterleavedThinking: (v: boolean) =>
            emit('update:interleavedThinking', v),
          updateShortcutCommands: (v: string) =>
            emit('update:shortcutCommands', v),
          updateShortcutTimeline: (v: string) =>
            emit('update:shortcutTimeline', v),
          updateShortcutNewSession: (v: string) =>
            emit('update:shortcutNewSession', v),
          setFocusedField: (v: ConfigDialogFocusedField | null) => {
            focusedField.value = v
          },
          apply: () => emit('apply'),
          cancel: () => emit('cancel'),
        },
        ui,
      )
    }
  },
})
