<template>
  <Pick-workflow
    :relatedEntityClass="props.relatedEntityClass"
    :relatedEntityId="props.relatedEntityId"
    :workflowsAvailables="props.workflowsAvailables"
    :preventDefaultMoveToGenerate="props.preventDefaultMoveToGenerate"
    :goToGenerateWorkflowPayload="props.goToGenerateWorkflowPayload"
    :countExistingWorkflows="countWorkflows"
    :embedded-within-list-modal="false"
    @go-to-generate-workflow="goToGenerateWorkflow"
    @click-open-list="openModal"
  ></Pick-workflow>

  <teleport to="body">
    <Modal
      v-if="modal.showModal"
      :modalDialogClass="modal.modalDialogClass"
      @close="modal.showModal = false"
    >
      <template v-slot:header>
        <h2 class="modal-title">{{ trans(WORKFLOW_LIST) }}</h2>
      </template>

      <template v-slot:body>
        <list-workflow-vue :workflows="workflows"></list-workflow-vue>
      </template>

      <template v-slot:footer>
        <pick-workflow
          v-if="allowCreate"
          :relatedEntityClass="props.relatedEntityClass"
          :relatedEntityId="props.relatedEntityId"
          :workflowsAvailables="props.workflowsAvailables"
          :preventDefaultMoveToGenerate="props.preventDefaultMoveToGenerate"
          :goToGenerateWorkflowPayload="props.goToGenerateWorkflowPayload"
          :countExistingWorkflows="countWorkflows"
          :embedded-within-list-modal="true"
          @go-to-generate-workflow="goToGenerateWorkflow"
        ></pick-workflow>
      </template>
    </Modal>
  </teleport>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits } from "vue";
import Modal from "ChillMainAssets/vuejs/_components/Modal";
import PickWorkflow from "ChillMainAssets/vuejs/_components/EntityWorkflow/PickWorkflow.vue";
import ListWorkflowVue from "ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflow.vue";
import { trans, WORKFLOW_LIST } from "translator";

// Define props
const props = defineProps({
  workflows: {
    type: Array,
    required: true,
  },
  allowCreate: {
    type: Boolean,
    required: true,
  },
  relatedEntityClass: {
    type: String,
    required: true,
  },
  relatedEntityId: {
    type: Number,
    required: false,
  },
  workflowsAvailables: {
    type: Array,
    required: true,
  },
  preventDefaultMoveToGenerate: {
    type: Boolean,
    required: false,
    default: false,
  },
  goToGenerateWorkflowPayload: {
    required: false,
    default: () => ({}),
  },
});

// Define emits
const emit = defineEmits(["goToGenerateWorkflow"]);

// Reactive data
const modal = ref({
  showModal: false,
  modalDialogClass: "modal-dialog-scrollable modal-xl",
});

// Computed properties
const countWorkflows = computed(() => props.workflows.length);

// Methods
const openModal = () => (modal.value.showModal = true);

const goToGenerateWorkflow = (data) => emit("goToGenerateWorkflow", data);
</script>

<style scoped></style>
