import type { CityResponseDto, DistrictResponseDto, GreetingDto, TagResponseDto } from '@/api/api'
import { reactive, ref } from 'vue'

export type ToastType = 'success' | 'error' | 'info' | 'warning'

export interface Toast {
  id: string
  type: ToastType
  message: string
  duration?: number
}

export type Tag = TagResponseDto
export type City = CityResponseDto
export type District = DistrictResponseDto
export type Greeting = GreetingDto

const toasts = ref<Toast[]>([])
const sidebarExpanded = ref(false)
const tags = ref<Tag[]>([])
const cities = ref<City[]>([])
const districts = reactive<Record<string, District[]>>({})
const greetings = ref<Greeting[]>([])
const referencesLoaded = ref(false)

function addToast(message: string, type: ToastType = 'info', duration = 4000) {
  const id = `${Date.now()}-${Math.random()}`
  toasts.value.push({ id, type, message, duration })
  if (duration > 0) {
    setTimeout(removeToast, duration, id)
  }
  return id
}

function removeToast(id: string) {
  toasts.value = toasts.value.filter(t => t.id !== id)
}

function setSidebarExpanded(value: boolean) {
  sidebarExpanded.value = value
}

function setTags(data: Tag[]) {
  tags.value = data
}
function setCities(data: City[]) {
  cities.value = data
}
function setDistricts(cityId: string, data: District[]) {
  districts[cityId] = data
}
function setGreetings(data: Greeting[]) {
  greetings.value = data
}
function setReferencesLoaded() {
  referencesLoaded.value = true
}

export function useUi() {
  return reactive({
    toasts,
    sidebarExpanded,
    tags,
    cities,
    districts,
    greetings,
    referencesLoaded,
    addToast,
    removeToast,
    setSidebarExpanded,
    setTags,
    setCities,
    setDistricts,
    setGreetings,
    setReferencesLoaded,
  })
}