import { defineStore } from 'pinia';

export const useMenuStore = defineStore('menu', {
    state: () => ({
        activeMenuItems: [],
        favorites: [],
        recent: [],
    }),
    persist: {
        pick: ['favorites', 'recent'],
    },
    actions: {
        toggleMenuItem(key) {
            const idx = this.activeMenuItems.indexOf(key);
            if (idx > -1) {
                this.activeMenuItems.splice(idx, 1);
            } else {
                this.activeMenuItems.push(key);
            }
        },
        addActiveMenuItem(key) {
            if (!this.activeMenuItems.includes(key)) {
                this.activeMenuItems.push(key);
            }
        },
        toggleFavorite(item) {
            const path = typeof item.to === 'string' ? item.to : item.to?.path;
            const idx = this.favorites.findIndex((f) => f.to === path);
            if (idx > -1) {
                this.favorites.splice(idx, 1);
            } else {
                this.favorites.push({ label: item.label, to: path, icon: item.icon });
            }
        },
        addToRecent(item) {
            const path = typeof item.to === 'string' ? item.to : item.to?.path;
            this.recent = [{ label: item.label, to: path, icon: item.icon }, ...this.recent.filter((r) => r.to !== path)].slice(
                0,
                5
            );
        },
    },
});