<script setup>
import { ref, inject, watch, computed } from "vue";
import { getAlarmMemberList, deleteAlarmMember } from "@/apis/alert";
import AlertNotifyTableAddModal from "./AlertNotifyTableAddModal.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { openToast, cancelToastOpen } = inject("app_toast");
const tableData = ref([]);
const editRecord = ref(null);
const { noticeList } = inject("notify_table");

const fetchTableData = async () => {
  const noticeMap = noticeList.value.reduce((acc, notice) => {
    acc[notice.system_value] = notice.system_key;
    return acc;
  }, {});

  const res = await getAlarmMemberList();
  tableData.value = res.data.map((member) => ({
    ...member,
    notify_items:
      member.notices
        .filter((n) => noticeMap[n])
        .map((n) => noticeMap[n])
        .join("\n") || t("alert.no_notify"),
  }));
};

watch(
  noticeList,
  (newVal) => {
    if (newVal) {
      fetchTableData();
    }
  },
  { immediate: true }
);

const columns = computed(() => [
  {
    title: t("alert.notify_name"),
    key: "name",
  },
  {
    title: t("alert.notify_phone"),
    key: "phone",
  },
  {
    title: t("alert.notify_email"),
    key: "email",
  },
  {
    title: t("alert.notify_items"),
    key: "notify_items",
  },
  {
    title: t("alert.operation"),
    key: "operation",
    width: 200,
  },
]);

const openModal = (record) => {
  if (record) {
    editRecord.value = record;
  } else {
    editRecord.value = null;
  }
  notify_add_table_item.showModal();
};

const onCancel = () => {
  editRecord.value = null;
  notify_add_table_item.close();
};

const remove = async (id) => {
  openToast("warning", t("msg.sure_to_delete"), "body", async () => {
    await cancelToastOpen();
    const res = await deleteAlarmMember(id);
    if (res.isSuccess) {
      fetchTableData();
      openToast("success",  t("msg.delete_success"));
    } else {
      openToast("error", res.msg);
    }
  });
};
</script>

<template>
  <div class="flex justify-start items-center mt-10">
    <h3 class="text-xl mr-5">{{ $t("alert.notify_list") }}</h3>
    <AlertNotifyTableAddModal
      :openModal="openModal"
      :onCancel="onCancel"
      :editRecord="editRecord"
      :fetchTableData="fetchTableData"
    />
  </div>
  <Table :columns="columns" :dataSource="tableData" class="w-3/4 mt-3">
    <template #bodyCell="{ record, column, index }">
      <template v-if="column.key === 'operation'">
        <button
          class="btn btn-sm btn-success text-white mr-2"
          @click.stop.prevent="() => openModal(record)"
        >
          {{ $t("button.edit") }}
        </button>
        <button
          class="btn btn-sm btn-error text-white"
          @click.stop.prevent="() => remove(record.id)"
        >
          {{ $t("button.delete") }}
        </button>
      </template>
      <template v-else>
        <pre>{{ record[column.key] }}</pre>
      </template>
    </template>
  </Table>
</template>

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