<template>
  <div>
    <q-tabs
      v-model="tab_value"
      dense
      class="text-grey"
      active-color="primary"
      indicator-color="primary"
      align="justify"
      narrow-indicator
      style="color: red"
    >
      <q-tab no-caps name="signal_source" :label="$t('signal source')" />
      <q-tab no-caps name="polling" :label="$t('signal polling')" />
    </q-tabs>
    <q-separator />

    <q-tab-panels v-model="tab_value" animated>
      <q-tab-panel name="signal_source">
        <signal-source-tree />
      </q-tab-panel>
      <q-tab-panel name="polling">
        <polling-tree />
      </q-tab-panel>
    </q-tab-panels>
  </div>
  <slot />
</template>

<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import { useStore } from "src/store";
import SignalSourceTree from "src/components/SignalSourceTree.vue";
import PollingTree from "src/components/PollingTree.vue";

export default defineComponent({
  name: "PageLeftToolBar",

  components: { SignalSourceTree, PollingTree },

  setup() {
    const $store = useStore();

    const tab_value = ref("signal_source");

    $store.commit("setCurrentLeftTab", tab_value.value);

    watch(
      () => tab_value.value,
      (n, o) => {
        $store.commit("setCurrentLeftTab", n);
      }
    );

    return { tab_value };
  },
});
</script>
