<template>
  <div class="q-pa-md q-gutter-sm">
    <q-tree
      :nodes="eventTree.screens"
      node-key="label"
      children-key="events"
      no-connectors
      v-model:expanded="expanded"
      :dense="true"
    >
      <template v-slot:default-header="prop">
        <div class="row col items-start no-wrap event-node" @click="onSelected(prop.node)">
          <q-icon v-if="prop.node.eventId"
                  name="play_circle"
                  :color="prop.node.hasFlow?'green':'grey'"
                  size="16px" class="q-mr-sm">
                  </q-icon>
          <div class="no-wrap" :class="selectedEvent && prop.node.eventId===selectedEvent.eventId?'selected-node':''">{{ prop.node.label }}</div>
        </div>
      </template>
    </q-tree>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from 'vue';
import { kintoneEvents,KintoneEvent } from '../../types/KintoneEvents';
import { storeToRefs } from 'pinia';
import { useFlowEditorStore } from 'stores/flowEditor';
export default defineComponent({
  name: 'EventTree',
  setup(props, context) {
    const store = useFlowEditorStore();
    const eventTree=ref(kintoneEvents);
    const selectedFlow = store.currentFlow;

    const expanded=ref([
      selectedFlow?.getRoot()?.title
    ]);
    const selectedEvent = ref<KintoneEvent|null>(null);
    const onSelected=(node:KintoneEvent)=>{
        if(!node.eventId){
          return;
        }
        selectedEvent.value=node;
    }
    return {
      eventTree,
      expanded,
      onSelected,
      selectedEvent,
      store
    }
  }
});
</script>
<style lang="scss">
.nowrap{
  flex-wrap:nowarp;
  text-wrap:nowarp;
}
.event-node{
  cursor:pointer;
}
.selected-node{
  color: $primary;
  font-weight: bolder;
}
.event-node:hover{
  background-color: $light-blue-1;
}
</style>
