/**
 * This is the global state for the OL-Provider component
 * with this state is accessable without directly passing
 * it down as a prop.
 */

import { LitElement } from 'lit'

interface StoreElement extends LitElement, ProviderStore {
    store: ProviderStore,
}

// The store with inital values.
const STORE: [ProviderStore, Array<StoreElement>] = [{
    activeElement: null,
    moreToolbar: false,
    reader: false,
    readerSpeed: 100,
    highlightColor: "yellow",
    highlight: false,
    scroll_: 0,
}, []];

/**
 * Function to update all of the components using the store.
 * 
 * @param key Key of a state property within the LitElement
 * @param value The value of the property should be changed to
 */
export const dispatchUpdate = <K extends keyof ProviderStore>(key: K, value: StoreElement[K]) => {
    const oldVal = STORE[0][key];
    STORE[0][key] = value;
    STORE[1].forEach(element => {
        // Update the value in the store
        element.store = STORE[0];
        element[key] = value;
        element.requestUpdate(key, oldVal);
    });
}

/**
 * Function that returns the store
 * 
 * @param element A lit element to bind the store to.
 * @returns The store
 */
export const useStore: (element: LitElement) => ProviderStore = (element) => {
    STORE[1].push(element as StoreElement);
    return STORE[0];
}

export const accessStore: <K extends keyof ProviderStore>(key: K) => ProviderStore[K] = (key) => {
    return STORE[0][key];
}

export interface ProviderStore {
    activeElement: HTMLElement | null
    reader: boolean,
    readerSpeed: number,
    moreToolbar: boolean,
    highlightColor: string,
    highlight: boolean,
    scroll_: number
}