import { defineStore } from 'pinia';
import { ref, computed, watch } from 'vue';
import { useWindowSize } from '@vueuse/core';
import type { AppState } from './types';

// 定义App模块 Store
export const useAppStore = defineStore('app', {
  // 状态
  state: (): AppState => {
    // 获取窗口大小
    const { width } = useWindowSize();
    
    return {
      // 默认以当前窗口宽度判断是否是移动端
      isMobile: width.value < 768,
      // 默认折叠状态为false
      isCollapse: false,
      // 移动端断点宽度
      mobileBreakpoint: 768
    };
  },

  // Getters
  getters: {
    // 获取移动端状态
    getIsMobile(): boolean {
      return this.isMobile;
    },
    // 获取折叠状态
    getIsCollapse(): boolean {
      return this.isCollapse;
    }
  },

  // Actions
  actions: {
    // 设置移动端状态
    setIsMobile(isMobile: boolean) {
      this.isMobile = isMobile;
      
      // 在移动端时自动折叠侧边栏
      if (isMobile && !this.isCollapse) {
        this.setCollapse(true);
      }
    },
    
    // 设置折叠状态
    setCollapse(isCollapse: boolean) {
      this.isCollapse = isCollapse;
    },
    
    // 切换折叠状态
    toggleCollapse() {
      this.setCollapse(!this.isCollapse);
    },
    
    // 根据窗口大小更新移动端状态
    updateMobileStatus() {
      const { width } = useWindowSize();
      const isMobile = width.value < this.mobileBreakpoint;
      this.setIsMobile(isMobile);
    },
    
    // 初始化监听器
    initResizeListener() {
      // 使用 vueuse 的 useWindowSize 监听窗口大小变化
      const { width } = useWindowSize();
      
      // 创建计算属性监听窗口宽度
      const isMobile = computed(() => width.value < this.mobileBreakpoint);
      
      // 监听计算属性的变化
      watch(isMobile, (newValue) => {
        this.setIsMobile(newValue);
      }, { immediate: true });
    }
  }
});

// 导出默认模块
export default {
  store: useAppStore
}; 