<script>
    import RoundIconButton from './RoundIconButton.svelte';
    import { createEventDispatcher, onDestroy } from 'svelte';
    import * as SoftwareVariables from '../stores.js';
    import { _ } from 'svelte-i18n'

    // Import the main colors from the store
    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor
    const unsubscribeFirstColor = SoftwareVariables.firstColor.subscribe((value) => (firstColor = value));
    const unsubscribeSecondColor = SoftwareVariables.secondColor.subscribe((value) => (secondColor = value));
    const unsubscribeThirdColor = SoftwareVariables.thirdColor.subscribe((value) => (thirdColor = value));
    const unsubscribeFourthColor = SoftwareVariables.fourthColor.subscribe((value) => (fourthColor = value));
    const unsubscribeOkColor = SoftwareVariables.okColor.subscribe((value) => (okColor = value));
    const unsubscribeNokColor = SoftwareVariables.nokColor.subscribe((value) => (nokColor = value));

    //---Navigation System---//

    let menuStates = {
        stage: true,
        atmo: false,
        devicesLibrary: false,
        settings: false
    };

    // Handle the click on a navigation button
    function handleNavigation(menu) {
        emitNavigationEvent(menu);
        deselectMenus();
        menuStates[menu] = true;
    }

    // Deselect all menus from the navigation bar
    function deselectMenus(){
        for (const menu in menuStates) {
            menuStates[menu] = false;
        }
    }

    // Emit navigation events
    const dispatch = createEventDispatcher();
    function emitNavigationEvent(menu) {
        dispatch('navigationChanged', {
            menu: menu
        });
    }

    // Unsubscribe for all variables used from the store
    onDestroy(() => {
        unsubscribeFirstColor();
        unsubscribeSecondColor();
        unsubscribeThirdColor();
        unsubscribeFourthColor();
        unsubscribeOkColor();
        unsubscribeNokColor();
    })
</script>

<div style="background-color: {secondColor};">
    <RoundIconButton id="stageMenu" on:click="{() => handleNavigation("stage")}" icon="bx-shape-square" width="2.5em" tooltip="{$_("stageMenuTooltip")}" active={menuStates.stage}></RoundIconButton>
    <RoundIconButton id="atmoMenu" on:click="{() => handleNavigation("atmo")}" icon="bxl-deezer" width="2.5em" tooltip="{$_("atmoMenuTooltip")}" active={menuStates.atmo}></RoundIconButton>
    <RoundIconButton id="devicesLibraryMenu" on:click="{() => handleNavigation("devicesLibrary")}" icon="bx-hdd" width="2.5em" tooltip={$_("devicesLibraryMenuTooltip")} active={menuStates.devicesLibrary}></RoundIconButton>
    <RoundIconButton id="settingsMenu" on:click="{() => handleNavigation("settings")}" icon="bx-cog" width="2.5em" tooltip={$_("settingsMenuTooltip")} active={menuStates.settings}></RoundIconButton>
    <RoundIconButton icon="bx-broadcast" width="2.5em" tooltip="{$_("dmxBoxStatusTooltip")}" operationalStatus=false okStatusLabel="{$_("dmxBoxOkStatusTooltip")}" nokStatusLabel="{$_("dmxBoxNokStatusTooltip")}"></RoundIconButton>
</div>

<style>
    div {
        display: inline-block;
        padding: 4px;
        border-radius: 40px;
    }
</style>