import { defineStore } from 'pinia'
import { ref } from 'vue'

type SnackbarColor = string
type SnackbarVariant = 'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'

type SnackbarLocation = string

interface ShowOptions {
  message: string
  color?: SnackbarColor
  timeout?: number
  location?: SnackbarLocation
  variant?: SnackbarVariant
}

export const useSnackbarStore = defineStore('snackbar', () => {
  const visible = ref(false)
  const message = ref('')
  const color = ref<SnackbarColor>('success')
  const timeout = ref(2000)
  const location = ref<SnackbarLocation>('top right')
  const variant = ref<SnackbarVariant>('flat')

  const show = (options: ShowOptions) => {
    message.value = options.message
    color.value = options.color ?? 'success'
    timeout.value = options.timeout ?? 2000
    location.value = options.location ?? 'top right'
    variant.value = options.variant ?? 'flat'

    visible.value = false
    requestAnimationFrame(() => {
      visible.value = true
    })
  }

  const hide = () => {
    visible.value = false
  }

  return {
    visible,
    message,
    color,
    timeout,
    location,
    variant,
    show,
    hide,
  }
})