<template>
  <div>
    <DefaultHeaderPage title="Suporte" />
    <DefaultTable
      ref="tableRef"
      :columns="columns"
      :api-call="getSupportTickets"
      add-item
      title="Tickets"
      :female="false"
      description="tickets"
      @on-add-item="openAddEditTicketDialog()"
    >
      <template #body-cell-status="{ row }">
        <q-td align="center">
          <q-badge
            :color="statusColor(row.status)"
            :label="statusLabel(row.status)"
            style="padding: 6px 10px"
          />
        </q-td>
      </template>

      <template #body-cell-actions="{ row }">
        <q-btn
          outline
          icon="mdi-pencil-outline"
          style="width: 36px"
          @click.prevent.stop="handleEdit(row)"
        />
        <q-btn
          v-if="row.status === 'in_progress'"
          outline
          icon="mdi-check-circle-outline"
          style="width: 36px"
          color="warning"
          @click.prevent.stop="handleClose(row)"
        />
        <q-btn
          v-if="row.status === 'in_progress'"
          outline
          icon="mdi-trash-can-outline"
          style="width: 36px"
          color="negative"
          @click.prevent.stop="handleDelete(row)"
        />
      </template>
    </DefaultTable>
  </div>
</template>

<script setup>
import { defineAsyncComponent, useTemplateRef } from "vue";
import { useQuasar } from "quasar";

import DefaultTable from "src/components/defaults/DefaultTable.vue";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import { getSupportTickets, deleteSupportTicket } from "src/api/support_ticket";

const AddEditTicketDialog = defineAsyncComponent(
  () => import("src/pages/support/components/AddEditTicketDialog.vue"),
);

const CloseTicketDialog = defineAsyncComponent(
  () => import("src/pages/support/components/CloseTicketDialog.vue"),
);

const $q = useQuasar();
const tableRef = useTemplateRef("tableRef");

const openAddEditTicketDialog = (ticket = null) => {
  $q.dialog({
    component: AddEditTicketDialog,
    componentProps: { ticket },
  }).onOk(() => {
    tableRef.value?.refresh();
  });
};

const columns = [
  {
    name: "id",
    label: "Ticket",
    field: "id",
    align: "left",
    sortable: true,
    required: true,
  },
  {
    name: "severity",
    label: "Prioridade",
    field: "severity",
    align: "left",
    sortable: true,
  },
  {
    name: "created_at",
    label: "Data",
    field: "created_at",
    align: "left",
    sortable: true,
  },
  {
    name: "sector",
    label: "Setor",
    field: "sector",
    align: "left",
    sortable: true,
  },
  {
    name: "title",
    label: "Título",
    field: "title",
    align: "left",
  },
  {
    name: "status",
    label: "Status",
    field: "status",
    align: "center",
    sortable: true,
  },
  {
    name: "actions",
    label: "Ações",
    field: "actions",
    align: "center",
    required: true,
  },
];

const statusLabel = (status) => {
  const map = {
    in_progress: "Em andamento",
    resolved: "Resolvido",
    unresolved: "Não resolvido",
  };
  return map[status] ?? status;
};

const statusColor = (status) => {
  const map = {
    in_progress: "warning",
    resolved: "positive",
    unresolved: "negative",
  };
  return map[status] ?? "grey";
};

const handleEdit = (row) => {
  openAddEditTicketDialog(row);
};

const handleClose = (row) => {
  $q.dialog({
    component: CloseTicketDialog,
    componentProps: { ticket: row },
  }).onOk(() => {
    tableRef.value?.refresh();
  });
};

const handleDelete = (row) => {
  $q.dialog({
    title: "Confirmar exclusão",
    message: "Tem certeza que deseja excluir este ticket?",
    ok: { color: "negative", label: "Excluir" },
    cancel: { color: "primary", outline: true, label: "Cancelar" },
  }).onOk(async () => {
    await deleteSupportTicket(row.id);
    tableRef.value?.refresh();
  });
};
</script>
