import { defineStore } from 'pinia'
import { ref } from 'vue'
import { Range } from '~/graphql/generated/operations'

export const useState = defineStore(
  'state',
  () => {
    const title = ref<string>('')
    const darkMode = ref(false)
    const locale = ref('sv')
    const range = ref<Range | undefined>(Range.OneWeek)
    const search = ref('')
    const includeHidden = ref(false)
    const setTitle = (s: string) => {
      title.value = s
    }
    const setDarkMode = (b: boolean) => {
      darkMode.value = b
    }
    const setLocale = (l: string) => {
      locale.value = l
    }
    const setSearch = (s: string) => {
      search.value = s
    }
    const setIncludeHidden = (b: boolean) => {
      includeHidden.value = b
    }
    const setRange = (r: Range | undefined) => {
      range.value = r
    }
    return {
      title,
      darkMode,
      locale,
      search,
      includeHidden,
      range,
      setTitle,
      setDarkMode,
      setLocale,
      setSearch,
      setIncludeHidden,
      setRange,
    }
  },
  {
    persist: {
      key: 'dancefinder_state',
    },
  },
)