import { useMagicKeys } from '@vueuse/core'
import { ref, watch } from 'vue'

export const useEditionMode = () => {
  const mode = ref<'read' | 'edit'>('read')
  const toggleMode = () => {
    mode.value = mode.value === 'read' ? 'edit' : 'read'
  }

  const { escape } = useMagicKeys()

  watch(escape, () => {
    if (mode.value === 'edit') {
      toggleMode()
    }
  })

  return {
    mode,
    toggleMode
  }
}