<template>
  <div>
    <div
      class="modal fade"
      :class="{ show: show, 'd-block': show }"
      tabindex="-1"
      role="dialog"
      aria-labelledby="planningNewRequestModalLabel"
      :aria-hidden="!show"
    >
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 id="planningNewRequestModalLabel" class="modal-title">
              Nouvelle demande
            </h5>
            <button
              type="button"
              class="btn-close"
              aria-label="Close"
              @click="$emit('close')"
            ></button>
          </div>

          <div class="modal-body">
            <p v-if="!creationType" class="text-sm text-muted mb-3">
              Choisissez le type à créer :
            </p>
            <p v-else class="text-sm text-muted mb-3">
              {{ creationTypeTitle }}
            </p>

            <planning-creation-type-selector
              v-if="!creationType"
              @select-type="$emit('select-type', $event)"
            />

            <planning-leave-request-form
              v-else-if="creationType === 'leave'"
              :form="leaveForm"
              :collaborators="collaborators"
              @update:form="$emit('update:leave-form', $event)"
              @submit="$emit('submit-leave')"
              @back="$emit('reset-type')"
            />

            <planning-event-form
              v-else-if="creationType === 'event'"
              :form="eventForm"
              @update:form="$emit('update:event-form', $event)"
              @submit="$emit('submit-event')"
              @back="$emit('reset-type')"
            />
          </div>
        </div>
      </div>
    </div>

    <div
      v-if="show"
      class="modal-backdrop fade show"
      @click="$emit('close')"
    ></div>
  </div>
</template>

<script setup>
import PlanningCreationTypeSelector from "@/components/molecules/Planning/PlanningCreationTypeSelector.vue";
import PlanningLeaveRequestForm from "@/components/molecules/Planning/PlanningLeaveRequestForm.vue";
import PlanningEventForm from "@/components/molecules/Planning/PlanningEventForm.vue";

import { defineProps, defineEmits } from "vue";

defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  creationType: {
    type: String,
    default: "",
  },
  creationTypeTitle: {
    type: String,
    default: "Nouvelle demande",
  },
  collaborators: {
    type: Array,
    default: () => [],
  },
  leaveForm: {
    type: Object,
    required: true,
  },
  eventForm: {
    type: Object,
    required: true,
  },
});

defineEmits([
  "close",
  "select-type",
  "reset-type",
  "submit-leave",
  "submit-event",
  "update:leave-form",
  "update:event-form",
]);
</script>
