<template>
  <div>
    <q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
      <template v-slot:default-header="prop">
        <q-item
          class="full-width"
          clickable
          :draggable="!prop.node.is_group"
          @dragstart="(evt) => onDragStart(evt, prop.node)"
        >
          <q-item-section avatar>
            <q-icon
              :name="
                prop.node.is_group
                  ? 'img:source_icon/group.png'
                  : getItemIcon(prop.node.item_data?.window_type)
              "
              color="orange"
              size="28px"
              class="q-mr-sm"
            />
          </q-item-section>
          <q-item-section>
            <div class="text-weight-bold text-primary">
              {{ prop.node.name }}
            </div>
          </q-item-section>
          <q-popup-proxy context-menu>
            <q-popup-proxy context-menu />
            <q-list>
              <q-item clickable v-close-popup v-ripple>
                <q-item-section avatar><q-icon name="add" /></q-item-section>
                <q-item-section>{{
                  $t("add signal source item")
                }}</q-item-section>
              </q-item>
              <q-item
                clickable
                v-close-popup
                v-if="prop.node.is_group"
                v-ripple
                @click="
                  () =>
                    $refs.group_dialog.showDialog({
                      type: 1,
                      parent: prop.node.uuid,
                    })
                "
              >
                <q-item-section avatar
                  ><q-icon name="create_new_folder"
                /></q-item-section>
                <q-item-section>{{ $t("add group") }}</q-item-section>
              </q-item>
              <q-item
                clickable
                v-ripple
                v-close-popup
                v-if="prop.node.uuid != '' && prop.node.name != $t('root')"
              >
                <q-item-section avatar><q-icon name="edit" /></q-item-section>
                <q-item-section>{{ $t("edit") }}</q-item-section>
              </q-item>

              <q-item
                clickable
                v-ripple
                v-close-popup
                v-if="prop.node.uuid != '' && prop.node.name != $t('root')"
              >
                <q-item-section avatar
                  ><q-icon color="red" name="delete"
                /></q-item-section>
                <q-item-section>{{ $t("delete") }} &nbsp;</q-item-section>
              </q-item>
            </q-list>
          </q-popup-proxy>
        </q-item>
      </template>
    </q-tree>
  </div>
  <group-dialog ref="group_dialog" />
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import { useStore } from "src/store";
import { SignalSourceTreeItemEntity } from "src/entities/SignalSourceEntity";
import GroupDialog from "src/components/GroupDialog.vue";
import { Common } from "src/common/Common";

export default defineComponent({
  name: "PageLeftToolBar",

  components: { GroupDialog },

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

    const tree_nodes = computed({
      get: () => $store.state.signal_source_tree,
      set: (val) => $store.commit("setSignalSourceTree", val),
    });

    return {
      tree_nodes,
      loga(a: any) {
        console.log(a);
      },
      onDragStart(e: DragEvent, node: SignalSourceTreeItemEntity) {
        e.dataTransfer?.setData("uuid", node.uuid);
        e.dataTransfer?.setData("node_object", JSON.stringify(node));
        if (e.dataTransfer) {
          e.dataTransfer.dropEffect = "move";
        }
      },
      getItemIcon(item_type: string) {
        return Common.getSignalSourceIcon(item_type);
      },
    };
  },
});
</script>
