<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="typescript" context="module">
    import { writable } from "svelte/store";

    type UpdateMap = Map<string, (event: Event) => boolean>;
    type ActiveMap = Map<string, boolean>;

    const updateMap = new Map() as UpdateMap;
    const activeMap = new Map() as ActiveMap;
    const activeStore = writable(activeMap);

    function updateButton(key: string, event: MouseEvent): void {
        activeStore.update(
            (map: ActiveMap): ActiveMap =>
                new Map([...map, [key, updateMap.get(key)(event)]])
        );
    }

    function updateButtons(callback: (key: string) => boolean): void {
        activeStore.update(
            (map: ActiveMap): ActiveMap => {
                const newMap = new Map() as ActiveMap;

                for (const key of map.keys()) {
                    newMap.set(key, callback(key));
                }

                return newMap;
            }
        );
    }

    export function updateActiveButtons(event: Event) {
        updateButtons((key: string): boolean => updateMap.get(key)(event));
    }

    export function clearActiveButtons() {
        updateButtons((): boolean => false);
    }
</script>

<script lang="typescript">
    import SquareButton from "./SquareButton.svelte";

    export let id: string;
    export let className = "";
    export let tooltip: string;
    export let command: string;

    export let onClick: (event: Event) => void;

    function onClickWrapped(event: MouseEvent): void {
        onClick(event);
        updateButton(command, event);
    }

    // document.queryCommandState(command);
    export let update: (event: Event) => boolean;

    updateMap.set(command, update);

    let active = false;

    activeStore.subscribe((map: ActiveMap): (() => void) => {
        active = Boolean(map.get(command));
        return () => map.delete(command);
    });
    activeMap.set(command, active);

    export let disables = true;
    export let dropdownToggle = false;
</script>

<SquareButton
    {id}
    {className}
    {tooltip}
    {active}
    {disables}
    {dropdownToggle}
    on:click
    on:mount>
    <slot />
</SquareButton>
