<!--
  This file is part of the Meeds project (https://meeds.io/).
  Copyright (C) 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="taskChangesDrawer"
    v-model="showTaskChangesDrawer"
    :class="showTaskChangesDrawer && 'showTaskChangesDrawer' || ''"
    class="taskCommentDrawer"
    right
    go-back-button>
    <template #title>
      {{ $t('label.changes') }}
    </template>
    <template #content>
      <v-list class="py-0">
        <v-list-item
          v-for="(item, i) in logs"
          :key="i"
          class="pe-0">
          <v-list-item-content class="mt-n1">
            <div class="d-flex">
              <exo-user-avatar
                :profile-id="item.author"
                :size="30"
                :url="false"
                popover
                align-top />
              <div class="d-flex" v-sanitized-html="renderChangeHTML(item)"></div>
            </div>
            <div>
              <div class="dateTime caption px-10 my-n3">
                <date-format :value="item.createdTime" :format="dateTimeFormat" />
              </div>
            </div>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </template>
  </exo-drawer>
</template>
<script>
export default {
  props: {
    logs: {
      type: Object,
      default: () => {
        return {};
      }
    },
    task: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      showTaskChangesDrawer: false,
      dateTimeFormat: {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
      },
      currentUserName: eXo.env.portal.userName,
      changeAuthor: {},
      userAvatar: '',
      avatarUrl: ''
    };
  },
  watch: {
    userAvatar() {
      this.avatarUrl = this.userAvatar;
    }
  },
  mounted() {
    this.$root.$on('displayTaskChanges', () => {
      this.showTaskChangesDrawer = true;
    });
    this.$root.$on('hideTaskChanges', () => {
      this.showTaskChangesDrawer = false;
    });
  },
  methods: {
    closeDrawer() {
      this.showTaskChangesDrawer = false;
    },
    logMsg(item) {
      return `log.${ item.actionName }`;
    },
    renderChangeHTML(item) {
      let str = '';
      if (item.actionName === 'assign' || item.actionName === 'unassign' || item.actionName === 'assignCoworker' || item.actionName === 'unassignCoworker') {
        const targetFullName = item.isTargetFullNameExternal ? `${item.targetFullName} (${this.$t('label.external')})` :  `${item.targetFullName}`;
        str = `<p class='text-truncate my-auto text-color ms-1 subtitle-2' title='${item.authorFullName} ${this.$t(this.logMsg(item))} ${targetFullName}'>` +
            `<span>${ this.$t(this.logMsg(item))}</span>`+
            `<a href='/portal/dw/profile/${item.target}'> ${targetFullName} </a>`+
            '</p>';
      } else if ( item.actionName === 'edit_project' ) {
        str = `<p class='text-truncate my-auto text-color ms-1 subtitle-2' title='${item.authorFullName} ${this.$t(this.logMsg(item))}  ${item.target}'>` +
            `<span>${ this.$t(this.logMsg(item))}</span>`+
            `<a href='#'> ${item.target} </a>`+
            '</p>';
      } else if ( item.actionName === 'edit_priority' ) {
        str = `<p class='text-truncate my-auto text-color ms-1 subtitle-2' title='${item.authorFullName} ${this.$t(this.logMsg(item))} ${item.task.status.priority}'> ${ this.$t(this.logMsg(item)) } ${item.task.priority}</p>`;
      } else {
        str = `<p class='text-truncate my-auto text-color ms-1 subtitle-2' title='${item.authorFullName} ${this.$t(this.logMsg(item))} ${item.target}'> ${ this.$t(this.logMsg(item)) } ${item.target}</p>`;
      }
      return str;
    },
  }
};
</script>