<script lang="ts">
    import { derived, type Writable } from "svelte/store";
    import { getScale } from "../../Display.svelte";
    import { getSwitchControllerContext } from "../../lib/switchControl";
    import Label from "../label.svelte";

    export let pos: [number, number];
    export let text: string;

    export let ids: number[];

    const s = getScale();

    const swCtx = getSwitchControllerContext();
    const sws = ids.map<Writable<boolean>>(swCtx.getStore);

    const invalid = derived(sws, (v, set) => {
        set(v.some((x) => x));
    });

    const click = () => {
        sws.forEach((x) => x.set(false));
    };
</script>

<Label {pos} {text} />
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<circle
    class="trigger"
    class:invalid={$invalid}
    on:click={click}
    cx={(pos[0] + 0.5) * $s}
    cy={(pos[1] + 0.5) * $s}
    r={$s / 2}
></circle>

<style lang="scss">
    .trigger {
        fill: rgba($color: green, $alpha: 0.1);
        &.invalid {
            fill: rgba($color: red, $alpha: 0.5);
        }
        &:hover {
            fill: rgba($color: red, $alpha: 0.5);
        }
    }
</style>