<!--
 This file is part of the Meeds project (https://meeds.io/).
 
 Copyright (C) 2020 - 2022 Meeds Association contact@meeds.io
 
 This program is free software; you can redistribute it and/or
 modify it under the terms of the GNU Lesser General Public
 License as published by the Free Software Foundation; either
 version 3 of the License, or (at your option) any later version.
 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 Lesser General Public License for more details.
 
 You should have received a copy of the GNU Lesser General Public License
 along with this program; if not, write to the Free Software Foundation,
 Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-->
<template>
  <exo-drawer
    ref="drawer"
    v-model="drawer"
    right>
    <template #title>
      <h4>{{ $t('deeds.provisioning.management.attachEmailTemplateWithNoteDrawerTitle') }}</h4>
    </template>
    <template #content>
      <v-treeview
        v-if="notesTree"
        :active="notePageId"
        :items="notesTree"
        item-key="noteId"
        item-text="name"
        item-children="children"
        selection-type="independent"
        open-all
        hoverable
        activatable
        transition
        dense
        @update:active="selectActive">
        <template #label="{item}">
          <v-list-item-title
            :title="item.name"
            class="body-2 clickable">
            {{ item.name }}
          </v-list-item-title>
        </template>
      </v-treeview>
    </template>
    <template #footer>
      <div class="d-flex">
        <v-btn
          min-width="120"
          name="cancelAttachNote"
          class="btn ms-auto me-2"
          outlined
          text
          @click="close">
          <span class="text-capitalize">
            {{ $t('deeds.cancel') }}
          </span>
        </v-btn>
        <v-btn
          :disabled="!notePage || !callback"
          min-width="120"
          name="attachNote"
          class="primary"
          depressed
          dark
          @click="attach">
          <span class="text-capitalize">
            {{ $t('deeds.attach') }}
          </span>
        </v-btn>
      </div>
    </template>
  </exo-drawer>
</template>
<script>
export default {
  data: () => ({
    notePageId: [],
    notePage: null,
    noteType: 'group',
    noteOwner: `spaces/${eXo.env.portal.spaceGroup}`,
    notesTree: null,
    callback: null,
    loading: false,
  }),
  watch: {
    loading() {
      if (this.loading) {
        this.$refs.drawer.startLoading();
      } else {
        this.$refs.drawer.endLoading();
      }
    },
  },
  created() {
    this.$root.$on('open-note-tree', this.open);
  },
  methods: {
    open(notePage, callback) {
      this.notePage = notePage && {
        noteId: notePage.id,
        name: notePage.title,
        children: []
      };
      this.notePageId = this.notePage?.noteId && [this.notePage?.noteId] || [];
      this.callback = callback;
      this.$refs.drawer.open();
      this.refreshTree();
    },
    close() {
      this.$refs.drawer.close();
    },
    refreshTree() {
      this.loading = true;
      this.$notesService.getFullNoteTree(this.noteType, this.noteOwner, '', false)
        .then(data => this.notesTree = data?.treeNodeData || [])
        .finally(() => this.loading = false);
    },
    selectActive(items) {
      if (!items?.length || !this.notesTree?.length) {
        this.notePage = null;
      } else {
        this.notePage = this.getNotePageRecursiverly(items[0], this.notesTree[0]);
      }
    },
    getNotePageRecursiverly(id, root) {
      if (root?.noteId === id) {
        return root;
      } else if (root?.children?.length) {
        for (let i = 0; i < root.children.length; i++) {
          const leaf = this.getNotePageRecursiverly(id, root.children[i]);
          if (leaf) {
            return leaf;
          }
        }
      }
      return null;
    },
    attach() {
      if (this.callback) {
        if (this.notePage) {
          this.callback({
            id: this.notePage.noteId,
            title: this.notePage.name,
          });
        } else {
          this.callback(null);
        }
        this.close();
      }
    },
  },
};
</script>
