<script lang="ts">
    import { getScale } from "../../Display.svelte";
    import { getSwitchControllerContext } from "../../lib/switchControl";
    import Switch from "../switch.svelte";

    export let pos: [number, number];
    export let line: [number, number];
    export let siding: number;

    export let reverseSwitch: boolean=false;
    export let id: number;

    const sw = getSwitchControllerContext().getStore(id);
    const s = getScale();

    const click = () => {
        sw.update((x) => !x);
    };
</script>

<Switch {pos} {line} {siding} thrown={$sw !== reverseSwitch} />
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<circle
    class="trigger"
    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);

        &:hover {
            fill: rgba($color: red, $alpha: 0.5);
        }
    }
</style>