<script setup lang="ts">
import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
import { computed, ref, useTemplateRef } from "vue";
import PickGenericDoc from "ChillMainAssets/vuejs/WorkflowAttachment/Component/PickGenericDoc.vue";
import { GenericDocForAccompanyingPeriod } from "ChillDocStoreAssets/types/generic_doc";
import { EntityWorkflow } from "ChillMainAssets/types";

interface PickGenericDocModalProps {
  workflow: EntityWorkflow | null;
  accompanyingPeriodId: number;
  toRemove: GenericDocForAccompanyingPeriod[];
}

type PickGenericDocType = InstanceType<typeof PickGenericDoc>;

const props = defineProps<PickGenericDocModalProps>();
const emit = defineEmits<{
  // eslint-disable-next-line @typescript-eslint/prefer-function-type
  (
    e: "pickGenericDoc",
    payload: { genericDoc: GenericDocForAccompanyingPeriod },
  ): void;
}>();
const picker = useTemplateRef<PickGenericDocType>("picker");
const modalOpened = ref<boolean>(false);
const pickeds = ref<GenericDocForAccompanyingPeriod[]>([]);
const modalClasses = { "modal-xl": true, "modal-dialog-scrollable": true };

const numberOfPicked = computed<number>(() => pickeds.value.length);

const onPicked = ({
  genericDoc,
}: {
  genericDoc: GenericDocForAccompanyingPeriod;
}) => {
  pickeds.value.push(genericDoc);
};

const onRemove = ({
  genericDoc,
}: {
  genericDoc: GenericDocForAccompanyingPeriod;
}) => {
  const index = pickeds.value.findIndex(
    (item) => item.uniqueKey === genericDoc.uniqueKey,
  );

  if (index === -1) {
    throw new Error("Remove generic doc that doesn't exist");
  }

  pickeds.value.splice(index, 1);
};

const onConfirm = () => {
  for (let genericDoc of pickeds.value) {
    emit("pickGenericDoc", { genericDoc });
  }
  pickeds.value = [];
  closeModal();
};

const closeModal = function () {
  modalOpened.value = false;
};

const openModal = function () {
  modalOpened.value = true;
};

defineExpose({ openModal, closeModal });
</script>

<template>
  <modal
    v-if="modalOpened"
    @close="closeModal"
    :modal-dialog-class="modalClasses"
  >
    <template v-slot:header>
      <h2 class="modal-title">Ajouter une pièce jointe</h2>
    </template>
    <template v-slot:body>
      <pick-generic-doc
        :workflow="props.workflow"
        :accompanying-period-id="props.accompanyingPeriodId"
        :to-remove="props.toRemove"
        :picked-list="pickeds"
        ref="picker"
        @pickGenericDoc="onPicked"
        @removeGenericDoc="onRemove"
      ></pick-generic-doc>
    </template>
    <template v-slot:footer>
      <ul v-if="numberOfPicked > 0" class="record_actions">
        <li>
          <button
            type="button"
            class="btn btn-chill-green text-white"
            @click="onConfirm"
          >
            <template v-if="numberOfPicked > 1">
              <i class="fa fa-plus"></i> Ajouter {{ numberOfPicked }} pièces
              jointes
            </template>
            <template v-else>
              <i class="fa fa-plus"></i> Ajouter une pièce jointe
            </template>
          </button>
        </li>
      </ul>
    </template>
  </modal>
</template>

<style scoped lang="scss"></style>
