<template>
  <div class="card mb-3 text-primary border-primary">
    <div class="card-body">
      <div class="wrap-header">
        <div class="row align-items-top">
          <div class="col-6">
            <div class="small text-muted">
              {{ motiveHierarchyLabel(ticket.currentMotive) }}
            </div>
          </div>
          <div class="col-6 text-end">
            <emergency-component
              :new_emergency="ticket.emergency"
              v-if="ticket.emergency == 'yes'"
            />
            <state-component
              v-if="ticket.currentState"
              :new_state="ticket.currentState"
            />
          </div>
        </div>
      </div>
      <div class="row align-items-top">
        <div class="col-md-6 col-12">
          <span
            class="h2"
            style="color: var(--bs-chill-blue); font-variant: all-small-caps"
          >
            {{ getTicketTitle(ticket) }}
          </span>
        </div>
        <div class="col-md-6 col-12 text-md-end text-start">
          <span
            v-if="ticket.createdAt"
            :title="formatDateTime(ticket.createdAt.datetime, 'long', 'long')"
            style="font-style: italic"
          >
            {{ getSinceCreated(ticket.createdAt.datetime, new Date()) }}
          </span>
        </div>
      </div>
    </div>

    <div class="card-body pt-0">
      <div class="row" v-if="ticket.currentAddressees.length">
        <div class="col-12 title text-start">
          <h3>{{ trans(CHILL_TICKET_LIST_ADDRESSEES) }}</h3>
        </div>
        <div class="col-12 list">
          <addressee-component :addressees="ticket.currentAddressees" />
        </div>
      </div>
      <div class="row" v-if="ticket.currentPersons.length">
        <div class="col-12 title text-start">
          <h3>{{ trans(CHILL_TICKET_LIST_PERSONS) }}</h3>
        </div>
        <div class="col-12 list">
          <person-component :entities="ticket.currentPersons" />
        </div>
      </div>
      <div class="row" v-if="ticket.caller">
        <div class="col-12 title text-start">
          <h3>{{ trans(CHILL_TICKET_LIST_CALLERS) }}</h3>
        </div>
        <div class="col-12 list">
          <person-component
            :entities="
              ticket.caller ? ([ticket.caller] as Person[] | Thirdparty[]) : []
            "
          />
        </div>
      </div>
    </div>
    <hr class="my-0" />
    <div class="card-footer bg-transparent border-0">
      <ul class="record_actions mb-0">
        <li>
          <button
            class="btn btn-view btn-outline-secondary"
            type="button"
            @click="$emit('view-ticket', ticket.id)"
          />
        </li>
        <li>
          <button
            class="btn btn-update btn-outline-primary"
            type="button"
            @click="emit('edit-ticket', ticket.id)"
          />
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
// Types
import { TicketSimple } from "../../../types";
import { Person } from "ChillPersonAssets/types";
import { Thirdparty } from "src/Bundle/ChillThirdPartyBundle/Resources/public/types";

// Utils
import {
  getSinceCreated,
  formatDateTime,
  getTicketTitle,
  motiveHierarchyLabel,
} from "../../TicketApp/utils/utils";

// Components
import EmergencyComponent from "../../TicketApp/components/Emergency/EmergencyComponent.vue";
import StateComponent from "../../TicketApp/components/State/StateComponent.vue";
import AddresseeComponent from "../../TicketApp/components/Addressee/AddresseeComponent.vue";
import PersonComponent from "../../TicketApp/components/Person/PersonComponent.vue";

// Translation
import {
  trans,
  CHILL_TICKET_LIST_ADDRESSEES,
  CHILL_TICKET_LIST_PERSONS,
  CHILL_TICKET_LIST_CALLERS,
} from "translator";

defineProps<{
  ticket: TicketSimple;
}>();

const emit = defineEmits<{
  "edit-ticket": [ticketId: number];
  "view-ticket": [ticketId: number];
}>();
</script>
