import type { Snippet } from 'svelte';

export interface BreadcrumbItem {
    /**
     * Index of the item to display
     */
    index: number;
    /**
     * ID of the item to navigate to
     */
    id?: string;
    /**
     * Title snippet to render
     */
    title: Snippet<[{ className?: string }]>;
}

class ScrollBreadcrumbsStore {
    #items = $state<BreadcrumbItem[]>([]);

    get items() {
        // Keep them sorted by index for Swiss orderliness
        return this.#items.sort((a, b) => a.index - b.index);
    }
    add(item: BreadcrumbItem) {
        if (!this.#items.find(i => i.index === item.index)) {
            this.#items.push(item);
        }
    }
    remove(index: number) {
        this.#items = this.#items.filter(i => i.index !== index);
    }
}

export function createScrollBreadcrumbsStore() {
    return new ScrollBreadcrumbsStore();
}

export const scrollBreadcrumbsStore = createScrollBreadcrumbsStore();