import type { Ref } from 'vue'

export type TextInputRef = { $el: HTMLElement } | null | undefined

export function insertPlaceholderAtCursor(
  inputRef: TextInputRef,
  value: string,
  onValueChange?: (newValue: string) => void,
) {
  if (!inputRef?.$el) return

  const input = inputRef.$el.querySelector('input') || inputRef.$el.querySelector('textarea')
  if (!input) return

  const start = input.selectionStart ?? 0
  const end = input.selectionEnd ?? 0
  const originalValue = input.value
  const newValue = originalValue.slice(0, start) + value + originalValue.slice(end)

  input.value = newValue
  input.setSelectionRange(start + value.length, start + value.length)
  input.focus()

  onValueChange?.(newValue)
}

export function useInsertPlaceholderAtCursor(
  inputRef: Ref<TextInputRef>,
  onValueChange?: (newValue: string) => void,
) {
  return (value: string) => insertPlaceholderAtCursor(inputRef.value, value, onValueChange)
}