import type { ChatPageContext } from '../../context'
import { h } from 'vue'
import { DimSdkPathPickerDialog } from '../../../../ui/components/PathPickerDialog'

export function renderPathPickerOverlay(ctx: ChatPageContext) {
  return [
    h(DimSdkPathPickerDialog, {
      modelValue: ctx.showPathPicker.value,
      'onUpdate:modelValue': (v: boolean) => (ctx.showPathPicker.value = v),
      w: ctx.pickerW.value,
      h: ctx.pickerH.value,
      title: ctx.pathPickerTitle.value,
      workspace: ctx.pickerWorkspace.value,
      mode: ctx.pathPickerMode.value,
      query: ctx.pathPickerQuery.value,
      'onUpdate:query': (v: string) => (ctx.pathPickerQuery.value = v),
      placeholder: ctx.pathPickerPlaceholder.value,
      onInvalid: (reason: string) => (ctx.pathPickerError.value = reason),
      onSelect: (absPath: string) => {
        ctx.pathPickerError.value = null
        ctx.showPathPicker.value = false
        ctx.pathPickerQuery.value = ''
        if (ctx.pathPickerMode.value === 'directory') ctx.setContextCwd(absPath)
        else if (!ctx.focusFiles.value.includes(absPath))
          ctx.focusFiles.value = [...ctx.focusFiles.value, absPath]
      },
      onClose: () => {
        ctx.showPathPicker.value = false
        ctx.pathPickerQuery.value = ''
        ctx.pathPickerError.value = null
      },
    }),
  ]
}
