import {defineStore} from 'pinia'
import type {OnlineUser, UserInfoType} from "~/types/UserType";
import type {serverValueItem} from "~/components/SettingCard.vue";
import type {LayoutItem} from "grid-layout-plus";
import {SymbolKind} from "vscode-languageserver-types";
import Object = SymbolKind.Object;
import {object} from "yup";

export interface IGridItem extends LayoutItem {
    serverValues?: serverValueItem[],
    selectChart?: string,
    chartRage?: number,
    type: "chart" | "card"
    cardConfig?: cardConfigType,
    selectCard?: string,
}

export type cardConfigType = {
    [key: string]: cardConfigItemType;
};

type cardConfigItemType = {
    label: string,
    value: string,
    type: 'text' | 'color'
}


export interface Layouts {
    'md': IGridItem[]
    'lg': IGridItem[]
    'sm': IGridItem[]
    'xs': IGridItem[]

    [key: string]: IGridItem[];
}

const defaultLayouts: Layouts = {
    'md': [],
    'lg': [],
    'xl': [],
    'sm': [],
    'xs': [],
};


export const useMainLayoutStore = defineStore('MainLayoutStore', {
    state: () => {
        return {
            IsLeftSidebarMini: false,
            SelectServer: <{ name: string, id?: string }>{}, // 选中的服务器
            UserInfo: <UserInfoType>{},
            OnlineUsers: <OnlineUser[]>[],
            ServerConfig: <{ key: string, value: string }[]>[], // 服务器配置
            LayoutsConfig: <Layouts>{...defaultLayouts}, // 布局配置
            IsScrolling: false,
        }
    }, actions: {
        toggleLeftSidebarMini() {
            this.IsLeftSidebarMini = !this.IsLeftSidebarMini
        },
        setUserInfo(userInfo: UserInfoType) {
            this.UserInfo = userInfo
        },
        setOnlineUsers(onlineUsers: OnlineUser[]) {
            this.OnlineUsers = onlineUsers
        },
        addLayout(layout: IGridItem) {
            const index = this.LayoutsConfig.lg.length
            const newLayout = layout
            newLayout.y = index + 12
            newLayout.x = (index * 2) % 12
            for (const layoutsConfigKey in this.LayoutsConfig) {
                this.LayoutsConfig[layoutsConfigKey].push(newLayout)
            }
        },
        deleteLayout(layoutId: string) {
            const index = this.LayoutsConfig.lg.findIndex(item => item.i === layoutId)
            if (index !== -1) {
                for (const layoutsConfigKey in this.LayoutsConfig) {
                    this.LayoutsConfig[layoutsConfigKey].splice(index, 1)
                }
            }
        }
    }, persist: {
        storage: persistedState.localStorage,
    },
})