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

/** 侧边栏最小宽度 */
export const MIN_SIDEBAR_WIDTH = 200
/** 侧边栏最大宽度 */
export const MAX_SIDEBAR_WIDTH = 650
/** 侧边栏默认宽度 */
export const DEFAULT_SIDEBAR_WIDTH = 400

export const useBaseLayoutStore = defineStore(
  'baseLayout',
  () => {
    /** 顶部导航栏标题 */
    const topbarTitle = ref<string>('')
    /** 当前选中的游戏 ID */
    const activeGameId = ref<string>('snake')
    /** 当前选中的游戏图标 */
    const activeGameIcon = ref<string>('🐍')
    /** 当前选中的游戏名称 */
    const activeGameName = ref<string>('贪吃蛇')
    /** 侧边栏当前宽度 */
    const sidebarWidth = ref<number>(DEFAULT_SIDEBAR_WIDTH)

    /**
     * 设置顶部导航栏标题
     * @param title - 标题文本
     */
    const setTopbarTitle = (title: string): void => {
      topbarTitle.value = title
    }

    /**
     * 更新当前选中的游戏信息
     * @param id - 游戏 ID
     * @param icon - 游戏图标
     * @param name - 游戏名称
     */
    const setActiveGame = (id: string, icon: string, name: string): void => {
      activeGameId.value = id
      activeGameIcon.value = icon
      activeGameName.value = name
    }

    /**
     * 设置侧边栏宽度，自动约束在最小和最大值之间
     * @param width - 新宽度（px）
     */
    const setSidebarWidth = (width: number): void => {
      sidebarWidth.value = Math.min(Math.max(width, MIN_SIDEBAR_WIDTH), MAX_SIDEBAR_WIDTH)
    }

    return {
      topbarTitle,
      activeGameId,
      activeGameIcon,
      activeGameName,
      sidebarWidth,
      setTopbarTitle,
      setActiveGame,
      setSidebarWidth
    }
  },
  {
    persist: {
      pick: ['activeGameId', 'activeGameIcon', 'activeGameName']
    }
  }
)