import { computed } from 'vue'
import { defineStore } from 'pinia'
import { useUserStore } from '@KTXC/stores/userStore'
import type { CalendarView } from '@/types'
import {
  AGENDA_VIEW_SPANS,
  DAYS_VIEW_SPANS,
  type AgendaViewSpan,
  type DaysViewSpan,
} from '@/types/spans'

const CALENDAR_VIEW_KEY = 'chrono.calendarView'
const DAYS_VIEW_SPAN_KEY = 'chrono.daysViewSpan'
const AGENDA_VIEW_SPAN_KEY = 'chrono.agendaViewSpan'

function normalizeCalendarView(value: unknown): CalendarView {
  return value === 'month' || value === 'agenda' || value === 'days' ? value : 'days'
}

function normalizeDaysViewSpan(value: unknown): DaysViewSpan {
  return typeof value === 'string' && DAYS_VIEW_SPANS.includes(value as DaysViewSpan)
    ? value as DaysViewSpan
    : '7d'
}

function normalizeAgendaViewSpan(value: unknown): AgendaViewSpan {
  return typeof value === 'string' && AGENDA_VIEW_SPANS.includes(value as AgendaViewSpan)
    ? value as AgendaViewSpan
    : '1w'
}

export const useChronoSettingsStore = defineStore('chronoSettingsStore', () => {
  const userStore = useUserStore()

  const calendarView = computed({
    get: () => normalizeCalendarView(userStore.getSetting(CALENDAR_VIEW_KEY)),
    set: (value: CalendarView) => userStore.setSetting(CALENDAR_VIEW_KEY, normalizeCalendarView(value)),
  })

  const daysViewSpan = computed({
    get: () => normalizeDaysViewSpan(userStore.getSetting(DAYS_VIEW_SPAN_KEY)),
    set: (value: DaysViewSpan) => userStore.setSetting(DAYS_VIEW_SPAN_KEY, normalizeDaysViewSpan(value)),
  })

  const agendaViewSpan = computed({
    get: () => normalizeAgendaViewSpan(userStore.getSetting(AGENDA_VIEW_SPAN_KEY)),
    set: (value: AgendaViewSpan) => userStore.setSetting(AGENDA_VIEW_SPAN_KEY, normalizeAgendaViewSpan(value)),
  })

  return {
    calendarView,
    daysViewSpan,
    agendaViewSpan,
  }
})