<template>
  <div @click="handleClick">
    <button type="button" class="btn btn-light position-relative">
      {{ trans(CHILL_TICKET_TICKET_PREVIOUS_TICKETS) }}

      <span
        class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-chill-green"
      >
        {{ previousTickets.length }}
        <span class="visually-hidden">Tickets</span>
      </span>
    </button>
  </div>

  <!-- Modal for ticket list -->
  <Modal
    v-if="showPreviousTicketModal"
    :show="showPreviousTicketModal"
    modal-dialog-class="modal-lg"
    @close="closeModal"
  >
    <template #header>
      <h3 class="modal-title">
        {{
          trans(CHILL_TICKET_LIST_TITLE_PREVIOUS_TICKETS, {
            name:
              currentPersons.length > 0
                ? currentPersons.map((person: Person) => person.text).join(", ")
                : undefined,
          })
        }}
      </h3>
    </template>

    <template #body>
      <ticket-list-component
        :hasMoreTickets="pagination.next !== null"
        :tickets="previousTickets"
        :title="trans(CHILL_TICKET_LIST_NO_TICKETS)"
        @fetchNextPage="fetchNextPage"
        @view-ticket="handleViewTicket"
        @edit-ticket="handleEditTicket"
      />
    </template>
  </Modal>
</template>

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

// Components
import Modal from "../../../../../../../ChillMainBundle/Resources/public/vuejs/_components/Modal.vue";
import TicketListComponent from "../../TicketList/components/TicketListComponent.vue";

// Translations
import {
  trans,
  CHILL_TICKET_LIST_NO_TICKETS,
  CHILL_TICKET_LIST_ERROR_LOADING_TICKET,
  CHILL_TICKET_TICKET_PREVIOUS_TICKETS,
  CHILL_TICKET_LIST_TITLE_PREVIOUS_TICKETS,
} from "translator";

// Types
import { Person } from "ChillPersonAssets/types";
import { TicketSimple } from "../../../types";

// Utils
import { localizedUrl } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
import { Pagination } from "ChillMainAssets/lib/api/apiMethods";

const store = useStore();
const showPreviousTicketModal = ref(false);
const showTicketHistoryModal = ref(false);
const selectedTicketId = ref<number | null>(null);

const pagination = computed(() => store.getters.getPagination as Pagination);
const currentPersons = computed(
  () => store.getters.getCurrentPersons as Person[],
);
const previousTickets = computed(
  () => store.getters.getPreviousTicketList as TicketSimple[],
);

onMounted(async () => {
  try {
    if (currentPersons.value.length) {
      await store.dispatch("fetchTicketList", {
        byPerson: currentPersons.value.map((person) => person.id),
      });
    }
  } catch (error) {
    console.error(trans(CHILL_TICKET_LIST_ERROR_LOADING_TICKET), error);
  }
});

function handleClick() {
  showPreviousTicketModal.value = true;
}

function closeModal() {
  showPreviousTicketModal.value = false;
}

async function handleViewTicket(ticketId: number) {
  selectedTicketId.value = ticketId;
  showTicketHistoryModal.value = true;

  try {
    await store.dispatch("fetchTicket", ticketId);
  } catch (error) {
    console.error(trans(CHILL_TICKET_LIST_ERROR_LOADING_TICKET), error);
  }
}

const fetchNextPage = async () => {
  if (pagination.value.next) {
    await store.dispatch("fetchTicketListByUrl", pagination.value.next);
  }
};

function handleEditTicket(ticketId: number) {
  const returnPath = localizedUrl(`/ticket/ticket/list`);
  window.location.href = localizedUrl(
    `/ticket/ticket/${ticketId}/edit?returnPath=${returnPath}`,
  );
}
</script>

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