<template>
  <div class="card mb-4">
    <div class="card-body">
      <div class="mb-3">
        <label class="form-label pe-2" for="emergency">
          {{ trans(CHILL_TICKET_LIST_FILTER_EMERGENCY) }}
        </label>
        <emergency-toggle-component v-model="isEmergency" class="float-end" />
      </div>

      <!-- Sélection du motif -->
      <div class="mb-3">
        <label class="form-label">{{
          trans(CHILL_TICKET_TICKET_SET_MOTIVE_TITLE)
        }}</label>
        <motive-selector-component
          v-model="ticketForm.motive"
          :motives="motives"
        />
      </div>

      <!-- Sélection des personnes -->
      <div class="row mb-3">
        <div class="col-md-6">
          <label class="form-label">
            {{ trans(CHILL_TICKET_TICKET_SET_PERSONS_TITLE_CALLER) }}
          </label>
          <persons-selector-component
            v-model="ticketForm.caller"
            :suggested="[]"
            :multiple="false"
            :types="['person', 'thirdparty']"
            :label="trans(CHILL_TICKET_TICKET_SET_PERSONS_CALLER_LABEL)"
          />
        </div>
        <div class="col-md-6">
          <label class="form-label">
            {{ trans(CHILL_TICKET_TICKET_SET_PERSONS_TITLE_PERSON) }}
          </label>
          <persons-selector-component
            v-model="ticketForm.persons"
            :suggested="suggestedPersons"
            :multiple="true"
            :types="['person']"
            :label="trans(CHILL_TICKET_TICKET_SET_PERSONS_USER_LABEL)"
          />
        </div>
      </div>

      <!-- Éditeur de commentaire -->
      <div class="mb-3">
        <label class="form-label">{{
          trans(CHILL_TICKET_TICKET_ADD_COMMENT_TITLE)
        }}</label>
        <comment-editor-component
          v-model="ticketForm.content"
          :motive="ticketForm.motive ? ticketForm.motive : null"
        />
      </div>

      <!-- Attribution des tickets -->
      <div class="mb-3">
        <label class="form-label">
          {{ trans(CHILL_TICKET_TICKET_ADD_ADDRESSEE_TITLE) }}
        </label>
        <addressee-selector-component
          v-model="ticketForm.addressees"
          :suggested="userGroups"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref, watch } from "vue";
import { useStore } from "vuex";

// Components
import MotiveSelectorComponent from "./Motive/MotiveSelectorComponent.vue";
import CommentEditorComponent from "./Comment/CommentEditorComponent.vue";
import PersonsSelectorComponent from "./Person/PersonsSelectorComponent.vue";
import AddresseeSelectorComponent from "./Addressee/AddresseeSelectorComponent.vue";
import EmergencyToggleComponent from "./Emergency/EmergencyToggleComponent.vue";
// Types
import { Motive, TicketInitForm } from "../../../types";
import { Person } from "ChillPersonAssets/types";

// Translations
import {
  trans,
  CHILL_TICKET_TICKET_SET_MOTIVE_TITLE,
  CHILL_TICKET_TICKET_ADD_COMMENT_TITLE,
  CHILL_TICKET_TICKET_SET_PERSONS_TITLE_CALLER,
  CHILL_TICKET_TICKET_SET_PERSONS_TITLE_PERSON,
  CHILL_TICKET_TICKET_SET_PERSONS_CALLER_LABEL,
  CHILL_TICKET_TICKET_SET_PERSONS_USER_LABEL,
  CHILL_TICKET_LIST_FILTER_EMERGENCY,
  CHILL_TICKET_TICKET_ADD_ADDRESSEE_TITLE,
} from "translator";
import { UserGroup } from "ChillMainAssets/types";

const props = defineProps<{
  modelValue: TicketInitForm;
  motives: Motive[];
  suggestedPersons: Person[];
}>();

const emit = defineEmits<{
  "update:modelValue": [value: TicketInitForm];
}>();

const store = useStore();

const ticketForm = reactive({ ...props.modelValue });
const isEmergency = ref<boolean>(
  props.modelValue.emergency == "yes" ? true : false,
);

const userGroups = computed(() => store.getters.getUserGroups as UserGroup[]);

watch(
  () => ticketForm.caller,
  async (newCaller) => {
    await store.dispatch("setCaller", newCaller);
    await store.dispatch("getSuggestedPersons");
  },
);

watch(
  ticketForm,
  (newVal) => {
    emit("update:modelValue", {
      ...newVal,
      emergency: isEmergency.value ? "yes" : "no",
    });
  },
  { deep: true },
);
</script>

<style lang="scss" scoped>
.card {
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
}

.card-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.gap-2 {
  gap: 0.5rem;
}
</style>
