import type { ComputedRef, Ref } from 'vue'
import { ref, watch } from 'vue'

export default function useTextValueMapping({
  valueTexts,
  onTextChange,
}: {
  /** Must useMemo, to assume that `valueTexts` only match on the first change */
  valueTexts: ComputedRef<string[]>
  onTextChange: (text: string) => void
}): [Ref<string>, (text: string) => void, () => void] {
  const text = ref('')

  function triggerTextChange(value: string) {
    text.value = value
    onTextChange(value)
  }

  function resetText() {
    text.value = valueTexts.value[0]
  }

  watch(
    () => [...valueTexts.value],
    (cur, pre = []) => {
      if (
        cur.join('||') !== pre.join('||') &&
        valueTexts.value.every((valText) => valText !== text.value)
      ) {
        resetText()
      }
    },
    { immediate: true },
  )

  return [text, triggerTextChange, resetText]
}
