import { create } from "zustand";

export type MenuItem = {
    text?: string;
    icon?: React.ReactNode;
    onClick?: () => void;
    divider?: boolean;
};

interface IMenuStore {
    items: MenuItem[];
    visible: boolean;
    anchorEl: HTMLElement | null;
    add: (item: MenuItem) => void;
    setAnchorEl: (el: HTMLElement) => void;
    divider: () => void;
    show: () => void;
    hide: () => void;
    clear: () => void;
    length: () => number;
}

export type MenuState = IMenuStore;

const useMenuStore = create<MenuState>()((set, get) => ({
    items: [],
    visible: false,
    anchorEl: null,
    add: (item: MenuItem) => set((state) => ({ items: [...state.items, item] })),
    setAnchorEl: (el: HTMLElement) => set(() => ({ anchorEl: el })),
    divider: () => set((state) => ({ items: [...state.items, { divider: true }] })),
    show: () =>
        set(() => ({
            visible: true,
        })),

    hide: () =>
        set(() => ({
            visible: false,
        })),
    clear: () =>
        set(() => ({
            items: [],
            visible: false,
        })),
    length: () => get().items.length,
}));

export { useMenuStore };
