<template>
  <Teleport to="#header-ticket-main">
    <div class="container-xxl text-primary">
      <div class="row">
        <div class="col-md-12 col-sm-12 ps-md-5 ps-xxl-0">
          <div class="small text-muted">
            {{ motiveHierarchyLabel(ticket.currentMotive) }}
          </div>
          <h1 class="responsive-title-h1">
            {{ getTicketTitle(ticket) }}
            <peloton-component
              :stored-objects="
                currentMotive ? currentMotive.storedObjects : null
              "
            />
          </h1>

          <h2 v-if="ticket.caller" class="responsive-title-h2">
            {{ ticket.caller.text }}
          </h2>
        </div>

        <div class="col-md-12 col-sm-12">
          <div class="d-flex justify-content-end">
            <emergency-toggle-component
              v-model="isEmergency"
              :disabled="!isOpen"
            />
            <state-toggle-component v-model="isOpen" />
          </div>
          <div class="d-flex justify-content-end">
            <p class="created-at-timespan" v-if="since">
              {{
                trans(CHILL_TICKET_TICKET_BANNER_SINCE, {
                  time: since,
                })
              }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </Teleport>
  <Teleport to="#header-ticket-details">
    <div class="container-xxl">
      <div class="row justify-content-between">
        <div
          class="col-4 d-flex flex-column align-items-start"
          v-if="ticket.caller"
        >
          <h3 class="text-primary responsive-title-h3">
            {{
              trans(CHILL_TICKET_TICKET_BANNER_CALLER, {
                count: ticket.caller ? 1 : 0,
              })
            }}
          </h3>
          <person-component :entities="caller" />
        </div>
        <div
          class="col-4 d-flex flex-column align-items-start"
          v-if="ticket.currentPersons.length"
        >
          <h3 class="text-primary responsive-title-h3">
            {{
              trans(CHILL_TICKET_TICKET_BANNER_PERSON, {
                count: ticket.currentPersons.length,
              })
            }}
          </h3>
          <person-component :entities="ticket.currentPersons" />
        </div>
        <div
          class="col-4 d-flex flex-column align-items-start"
          v-if="ticket.currentAddressees.length"
        >
          <h3 class="text-primary responsive-title-h3">
            {{
              trans(CHILL_TICKET_TICKET_BANNER_SPEAKER, {
                count: ticket.currentAddressees.length,
              })
            }}
          </h3>
          <addressee-component :addressees="ticket.currentAddressees" />
        </div>
      </div>
    </div>
  </Teleport>
</template>

<style lang="scss">
.created-at-timespan {
  font-weight: 600;
  font-variant: all-petite-caps;
}
</style>

<script setup lang="ts">
import { computed, ComputedRef, ref } from "vue";
import { useToast } from "vue-toast-notification";

// Components
import PelotonComponent from "./PelotonComponent.vue";
import AddresseeComponent from "./Addressee/AddresseeComponent.vue";
import EmergencyToggleComponent from "./Emergency/EmergencyToggleComponent.vue";
import StateToggleComponent from "./State/StateToggleComponent.vue";
import PersonComponent from "./Person/PersonComponent.vue";

// Types
import { Motive, Ticket } from "../../../types";
import { Person } from "ChillPersonAssets/types";

import {
  trans,
  CHILL_TICKET_TICKET_BANNER_SINCE,
  CHILL_TICKET_TICKET_BANNER_SPEAKER,
  CHILL_TICKET_TICKET_BANNER_CALLER,
  CHILL_TICKET_TICKET_BANNER_PERSON,
  CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN_SUCCESS,
  CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN_ERROR,
  CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE_SUCCESS,
  CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE_ERROR,
  CHILL_TICKET_TICKET_BANNER_EMERGENCY_SUCCESS,
  CHILL_TICKET_TICKET_BANNER_EMERGENCY_ERROR,
  CHILL_TICKET_TICKET_BANNER_NO_EMERGENCY_ERROR,
  CHILL_TICKET_TICKET_BANNER_NO_EMERGENCY_SUCCESS,
} from "translator";

// Store
import { useStore } from "vuex";

// Utils
import { getTicketTitle, motiveHierarchyLabel } from "../utils/utils";
import {
  isThirdparty,
  Thirdparty,
} from "../../../../../../../ChillThirdPartyBundle/Resources/public/types";

const props = defineProps<{
  ticket: Ticket;
}>();

const store = useStore();
const toast = useToast();
const today = ref(new Date());

const currentMotive: ComputedRef<Motive | null> = computed(() =>
  store.getters.getMotiveById(props.ticket.currentMotive?.id),
);

setInterval(() => {
  today.value = new Date();
}, 5000);

const isOpen = computed({
  get: () => store.getters.isOpen as boolean,
  set: async (value: boolean) => {
    try {
      await store.dispatch("setTicketState", value ? "open" : "close");
      toast.success(
        trans(
          value
            ? CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN_SUCCESS
            : CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE_SUCCESS,
        ),
      );
    } catch (error) {
      console.error(error);
      toast.error(
        trans(
          value
            ? CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_REOPEN_ERROR
            : CHILL_TICKET_TICKET_ACTIONS_TOOLBAR_CLOSE_ERROR,
        ),
      );
    }
  },
});
const isEmergency = computed({
  get: () => store.getters.isEmergency as boolean,
  set: async (value: boolean) => {
    try {
      await store.dispatch("setEmergency", value ? "yes" : "no");
      toast.success(
        trans(
          value
            ? CHILL_TICKET_TICKET_BANNER_EMERGENCY_SUCCESS
            : CHILL_TICKET_TICKET_BANNER_NO_EMERGENCY_SUCCESS,
        ),
      );
    } catch (error) {
      console.error(error);
      toast.error(
        trans(
          value
            ? CHILL_TICKET_TICKET_BANNER_EMERGENCY_ERROR
            : CHILL_TICKET_TICKET_BANNER_NO_EMERGENCY_ERROR,
        ),
      );
    }
  },
});
const caller = computed<Person[] | Thirdparty[]>(() => {
  if (null === props.ticket.caller) {
    return [];
  }

  if (isThirdparty(props.ticket.caller)) {
    return [props.ticket.caller];
  } else {
    return [props.ticket.caller];
  }
});

const since = computed(() => {
  return store.getters.getSinceCreated(today.value);
});
</script>
