// useFormHandler.js
import { ref } from 'vue'

export function useFormHandler(initialData = {}) {
  const formData = ref({ ...initialData })
  const errors = ref({})
  const validate = () => {
    errors.value = {}
    Object.keys(formData.value).forEach(key => {
      if (!formData.value[key]) errors.value[key] = 'Required'
    })
    return Object.keys(errors.value).length === 0
  }
  return { formData, errors, validate }
}

// ======================================= // 

// useTheme.js
import { ref, provide, inject } from 'vue'

const ThemeSymbol = Symbol('Theme')
export function provideTheme() {
  const theme = ref('light')
  const toggleTheme = () => {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
  }
  provide(ThemeSymbol, { theme, toggleTheme })
}
export function useTheme() {
  const themeContext = inject(ThemeSymbol)
  if (!themeContext) throw new Error('useTheme() must be used after provideTheme()')
  return themeContext
}

<!-- App.vue -->
<script setup>
import { provideTheme } from './composables/useTheme'
provideTheme()
</script>

<!-- Navbar.vue -->
<script setup>
import { useTheme } from '../composables/useTheme'
const { theme, toggleTheme } = useTheme()
</script>

<template>
  <button @click="toggleTheme">Toggle to {{ theme === 'light' ? 'dark' : 'light' }}</button>
</template>

// ======================================= //

// useEventBus.js
import mitt from 'mitt'

const emitter = mitt()
export function useEventBus() {
  return emitter
}

// useNotification.js
import { useEventBus } from './useEventBus'
const bus = useEventBus()

export function useNotification() {
  const notify = (msg) => bus.emit('notify', msg)
  const onNotify = (handler) => bus.on('notify', handler)
  return { notify, onNotify }
}


// ======================================= //

// useAppState.js
import { ref } from 'vue'
const globalState = ref({ user: null, theme: 'light' })

export function useAppState() {
  return globalState
}