import type { ChatPageContext } from '../../context'
import { t } from '#cli/i18n'
import { h } from 'vue'
import { DimSdkCommandPalette } from '../../../../ui/components/CommandPalette'

export function renderPinnedOverlay(ctx: ChatPageContext) {
  return [
    h(DimSdkCommandPalette, {
      modelValue: ctx.showPinned.value,
      'onUpdate:modelValue': (v: boolean) => (ctx.showPinned.value = v),
      title: t('chatPage.pins.title'),
      options: ctx.pinnedOptions.value,
      selectedIndex: ctx.pinnedIndex.value,
      'onUpdate:selectedIndex': (v: number) => (ctx.pinnedIndex.value = v),
      onSelect: (v: string | null) => ctx.onPinnedSelect(v),
      onClose: ctx.closePinned,
    }),
  ]
}
