import { ref, computed, readonly } from 'vue'
import type { SnackbarState } from '~/types/checkin'

export const useSnackbar = () => {
  const snackbar = ref<SnackbarState>({
    show: false,
    title: '',
    message: '',
    color: '',
    icon: '',
    timeout: 4000,
  })

  const showSnackbar = (
    title: string,
    message: string,
    color: string,
    icon: string,
    timeout = 4000
  ) => {
    snackbar.value = {
      show: true,
      title,
      message,
      color,
      icon,
      timeout,
    }
  }

  // Computed untuk snackbar.show agar v-model bisa bekerja
  const snackbarShow = computed({
    get: () => snackbar.value.show,
    set: (value: boolean) => {
      snackbar.value.show = value
    }
  })

  return {
    snackbar: readonly(snackbar),
    snackbarShow,
    showSnackbar,
  }
}