import { defineStore } from 'pinia'
import { useLocalStorage, StorageSerializers } from '@vueuse/core'
import { isMobile } from '../utils'

import type { Auth, StreamFormat, ServerInfo } from '../types'

export const useMainStore = defineStore('main', {
  state: () => ({
    serverUrl: useLocalStorage<string | null>('settings.serverUrl', null, { serializer: StorageSerializers.string }),
    serverCredentials: useLocalStorage<Auth | null>('settings.serverCredentials', null, { serializer: StorageSerializers.object }),
    serverInfo: useLocalStorage<ServerInfo | null>('settings.serverInfo', null, { serializer: StorageSerializers.object }),

    streamFormat: useLocalStorage<StreamFormat>('settings.streamFormat', 'opus' as StreamFormat),
    streamBitrate: useLocalStorage<number>('settings.streamBitrate', 128),
    coverSize: useLocalStorage<number>('settings.coverSize', 512),
    themeColor: useLocalStorage<string | null>('settings.themeColor', null, { serializer: StorageSerializers.string }),
    artistAlbumSortOrder: useLocalStorage<'desc' | 'asc'>('settings.artistAlbumSortOrder', 'desc'),

    error: null as null | Error,
    isLoading: false,
    menuVisible: false,
    loaderVisible: false,
  }),

  actions: {
    setError(error: Error) {
      this.error = error
    },
    clearError() {
      this.error = null
    },

    showMenu() {
      this.menuVisible = true
    },
    hideMenu() {
      this.menuVisible = false
    },
    toggleMenu() {
      this.menuVisible = !this.menuVisible
    },

    showLoader() {
      this.loaderVisible = true
    },
    hideLoader() {
      this.loaderVisible = false
    },

    toggleArtistAlbumSortOrder() {
      this.artistAlbumSortOrder = this.artistAlbumSortOrder === 'asc' ? 'desc' : 'asc'
    },

    setThemeColor (color: string | null) {
      this.themeColor = color
    },
    applyThemeColor () {
      if (!this.themeColor)
        return

      const
        bigint = parseInt(this.themeColor.replace('#', ''), 16),
        colorRgb = `${(bigint >> 16) & 255}, ${(bigint >> 8) & 255}, ${bigint & 255}`

      document.documentElement.style.setProperty('--accent-hex', this.themeColor)
      document.documentElement.style.setProperty('--accent-rgb', colorRgb)
    },

    setServerUrl (url: string) {
      if (!url || this.serverUrl === url)
        return

      this.serverUrl = url
      this.serverCredentials = null
      this.serverInfo = null
    },
    setServerCredentials (auth: Auth) {
      if (!auth)
        return

      this.serverInfo = null
      this.serverCredentials = auth
    },
    setServerInfo (serverInfo: ServerInfo) {
      if (!serverInfo)
        return

      this.serverInfo = serverInfo
    },

    isAuthenticated(): boolean {
      return !!this.serverCredentials
    },

    setStreamFormat (format: StreamFormat) {
      this.streamFormat = format
    },
    setStreamBitrate (bitrate: number) {
      this.streamBitrate = bitrate
    },
  },
})