<template>
  <v-main v-if="canManage">
    <v-text-field
      v-if="editMode"
      @blur="updateTicket()"
      v-model="attachedTask"
      :label="$t('cs.attachedJira')" />
    <div
      v-if="!editMode">
      <label
        v-if="attachedTask"
        class="v-label v-label--active theme--light cs-custom-label"
        for="tasks">
        {{ $t('cs.attachedJira') }}
      </label>
      <span
        id="tasks"
        class="pa-1"
        v-for="task in attachedTasksList"
        :key="task">
        <v-tooltip
          right
          class="cs-custom-tooltip">
          <template v-slot:activator="{ on, attrs }">
            <v-chip
              small
              v-on="on"
              v-bind="attrs"
              :close="canManage"
              class="mt-1 text-caption"
              :href="taskLink(task)"
              target="_blank"
              :color="taskStatusColor(attachedTasksWithStatus[task])"
              text-color="white"
              @click:close="removeTask(task)">
              <v-icon
                small
                left>mdi-bug</v-icon>
              {{ task }}
            </v-chip>
          </template>
          <span>{{ attachedTasksWithStatus[task] }}</span>
        </v-tooltip>
      </span>
    </div>
  </v-main>
</template>

<script>
export default {
  props: {
    editMode: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    canManage: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    attachedTask: {
      type: String,
      default: function () {
        return null;
      },
    },
    attachedTasksList: {
      type: Array,
      default: function () {
        return [];
      },
    },
    attachedTasksWithStatus: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  methods: {
    updateTicket() {
      this.$root.$emit('update-ticket', null, null, null, this.attachedTask, false);
    },
    removeTask(task) {
      this.$root.$emit('remove-task-from-ticket', task);
    },
    taskLink(taskId) {
      return `${eXo.env.portal.context}/${eXo.env.portal.portalName}/tasks/taskDetail/${taskId}`;
    },
    taskStatusColor(status) {
      return status? this.$csUtils.stringToRGB(status) : 'grey';
    },
  }

};
</script>
