<template>
  <div class="flex-table workflow" id="workflow-list">
    <div
      v-for="(w, i) in props.workflows"
      :key="`workflow-${i}`"
      class="item-bloc"
    >
      <div>
        <div class="item-row col">
          <h2>{{ w.title }}</h2>
          <div class="flex-grow-1 ms-3 h3">
            <div class="visually-hidden">
              {{ w.relatedEntityClass }}
              {{ w.relatedEntityId }}
            </div>
          </div>
        </div>

        <div class="breadcrumb">
          <template v-for="(step, j) in w.steps" :key="`step-${j}`">
            <span
              class="mx-2"
              tabindex="0"
              data-bs-trigger="focus hover"
              data-bs-toggle="popover"
              data-bs-placement="bottom"
              data-bs-custom-class="workflow-transition"
              :title="getPopTitle(step)"
              :data-bs-content="getPopContent(step)"
            >
              <i
                v-if="step.currentStep.name === 'initial'"
                class="fa fa-circle me-1 text-chill-yellow"
              >
              </i>
              <i v-if="step.isFreezed" class="fa fa-snowflake-o fa-sm me-1">
              </i>
              {{ step.currentStep.text }}
            </span>
            <span v-if="j !== Object.keys(w.steps).length - 1"> → </span>
          </template>
        </div>
        <span
          v-if="w.isOnHoldAtCurrentStep"
          class="badge bg-success rounded-pill"
          >{{ trans(WORKFLOW_ON_HOLD) }}</span
        >
      </div>

      <div class="item-row">
        <div class="item-col flex-grow-1">
          <p v-if="isUserSubscribedToStep(w)">
            <i class="fa fa-check fa-fw"></i>
            {{ trans(WORKFLOW_YOU_SUBSCRIBED_TO_ALL_STEPS) }}
          </p>
          <p v-if="isUserSubscribedToFinal(w)">
            <i class="fa fa-check fa-fw"></i>
            {{ trans(WORKFLOW_YOU_SUBSCRIBED_TO_FINAL_STEP) }}
          </p>
        </div>
        <div class="item-col">
          <ul class="record_actions">
            <li>
              <a
                :href="goToUrl(w)"
                class="btn btn-sm btn-show"
                :title="trans(SEE)"
              ></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Popover from "bootstrap/js/src/popover";
import { onMounted } from "vue";
import {
  trans,
  BY_USER,
  SEE,
  WORKFLOW_YOU_SUBSCRIBED_TO_ALL_STEPS,
  WORKFLOW_YOU_SUBSCRIBED_TO_FINAL_STEP,
  WORKFLOW_ON_HOLD,
  WORKFLOW_AT,
} from "translator";

// props
const props = defineProps({
  workflows: {
    type: Array,
    required: true,
  },
});

// methods
const goToUrl = (w) => `/fr/main/workflow/${w.id}/show`;
const getPopTitle = (step) => {
  if (step.transitionPrevious != null) {
    //console.log(step.transitionPrevious.text);
    let freezed = step.isFreezed
      ? `<i class="fa fa-snowflake-o fa-sm me-1"></i>`
      : ``;
    return `${freezed}${step.transitionPrevious.text}`;
  }
};
const getPopContent = (step) => {
  if (step.transitionPrevious != null) {
    if (step.transitionPreviousBy !== null) {
      return `<ul class="small_in_title">
              <li><span class="item-key">${trans(BY_USER)} : </span><b>${step.transitionPreviousBy.text}</b></li>
              <li><span class="item-key">${trans(WORKFLOW_AT)} : </span><b>${formatDate(step.transitionPreviousAt.datetime)}</b></li>
              </ul>`;
    } else {
      return `<ul class="small_in_title">
                      <li><span class="item-key">${trans(WORKFLOW_AT)} : </span><b>${formatDate(step.transitionPreviousAt.datetime)}</b></li>
                  </ul>`;
    }
  }
};
const formatDate = (datetime) =>
  datetime.split("T")[0] + " " + datetime.split("T")[1].substring(0, 5);
const isUserSubscribedToStep = () => false;
const isUserSubscribedToFinal = () => false;

onMounted(() => {
  const triggerList = [].slice.call(
    document.querySelectorAll('[data-bs-toggle="popover"]'),
  );
  triggerList.map(function (el) {
    return new Popover(el, {
      html: true,
    });
  });
});
</script>
