<script setup lang="ts">
import { computed, reactive, ref, watch } from "vue";
import { useQuasar } from "quasar";

import { useCounterMixin } from "@/stores/mixin";
import { tokenParsed } from "@/plugins/auth";
import http from "@/plugins/http";
import config from "@/app.config";

/** importType*/
import type { ListApi } from "@/modules/06_webservices/interface/index/Main";
import type {
  FormCreate,
  DnaId,
} from "@/modules/06_webservices/interface/request/Main";
import type { ResApiName } from "@/modules/06_webservices/interface/response/Main";
import type { NodeTree } from "@/modules/02_users/interface/response/Main";

/** importComponents*/
import DialogHeader from "@/components/DialogHeader.vue";

/** use*/
const $q = useQuasar();
const {
  dialogMessageNotify,
  showLoader,
  hideLoader,
  messageError,
  dialogConfirm,
  success,
} = useCounterMixin();

/** props*/
const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
  fetchData: {
    type: Function,
    required: true,
  },
});

const topicRef = ref<any>(null); //refinput ชื่อ/คำอธิบาย
const accessTypeRef = ref<any>(null); //ref select การเข้าถึง
const isAPIKey = ref<boolean>(false); //status API Key
const apiKey = ref<string>(""); // API Key
const options = ref<ListApi[]>([]); //รายการ API ที่เข้าถึงได้
const optionsAccessType = ref([
  { label: "ทั้งหมด", value: "ALL" },
  { label: "ROOT", value: "ROOT" },
  { label: "CHILD", value: "CHILD" },
  { label: "NORMAL", value: "NORMAL" },
]);

// form การสร้างรายการ API Key
const formData = reactive<FormCreate>({
  name: "", //ชื่อ/คำอธิบาย
  accessType: "", //การเข้าถึง
  apiId: [], //id รายการ API ที่เข้าถึงได้
});
const dnaId = reactive<DnaId>({
  dnaRootId: "",
  dnaChild1Id: "",
  dnaChild2Id: "",
  dnaChild3Id: "",
  dnaChild4Id: "",
});

const filter = ref<string>(""); // ตัวกรองค้นหา
const expanded = ref<string[]>([]); // ขยายรายการ tree
const orgId = ref<string>(""); // รหัสหน่วยงาน
const nodeTree = ref<Array<NodeTree>>([]);
const lazy = ref(nodeTree);

const titleName = computed<string>(() => {
  return !isAPIKey.value ? "สร้าง API Key" : "API Key";
});

/** ฟังก์ชันเรียกรายการข้อมูล API ที่เข้าถึงได้*/
async function fetchListApiKeyName() {
  await http
    .get(config.API.apiKeyMain + "/name")
    .then(async (res) => {
      const data = (await res.data?.result) || [];
      options.value = data.map((e: ResApiName) => ({
        label: e.name,
        value: e.id,
      }));
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/** ฟังก์ชันยืนยันการสร้าง API Key */
function onCreateAPIKey() {
  topicRef.value.validate();
  accessTypeRef.value.validate();

  const isCheckRootID = orgId.value ? true : false;
  const isCheckAscessType = formData.accessType === "ALL" ? true : false;

  //เช็คข้อมูล ชื่อ/คำอธิบาย
  if (topicRef.value.validate() && accessTypeRef.value.validate()) {
    // ช็คข้อมูล รายการ API ที่เข้าถึงได้ที่เลือก ถ้ามีแสดง popup ยืนยันการสร้าง API Key

    if (!isCheckAscessType && !isCheckRootID) {
      dialogMessageNotify($q, "กรุณาเลือก หน่วยงาน/ส่วนราชการ");
    } else {
      if (formData.apiId.length > 0) {
        dialogConfirm($q, async () => {
          showLoader();
          await http
            .post(config.API.apiKeyMain, {
              ...formData,
              name: formData.name.replace(/\s+/g, ""), //ตัดช่องว่างทั้งหมด
              ...dnaId,
            })
            .then(async (res) => {
              const data = await res.data.result;
              apiKey.value = data;
              success($q, "สร้าง API Key สำเร็จ");
              isAPIKey.value = true;
            })
            .catch((err) => {
              messageError($q, err);
            })
            .finally(() => {
              hideLoader();
            });
        });
      } else {
        //ไม่มีรายการ แสดง Popup กรุณาเลือก API ที่เข้าถึงได้
        dialogMessageNotify($q, "กรุณาเลือก API ที่เข้าถึงได้");
      }
    }
  }
}

/** ฟังก์ชันคัดลอก API API Key*/
function onCopyToClipboard() {
  navigator.clipboard.writeText(apiKey.value);
}

/**
 * ฟังก์ชันปิด popup
 * ถ้ามี API Key ให้เรียกข้อมูลรายการ web services ใหม่
 */
function onCloseDialog() {
  //เช็ค API Key
  if (isAPIKey.value) {
    props.fetchData?.();
  }
  modal.value = false;
  isAPIKey.value = false;
  formData.name = "";
  formData.accessType = "";
  formData.apiId = [];
  nodeTree.value = [];
  expanded.value = [];
}

/** ฟังก์ชันเรียกข้อมูลโครงสร้าง แบบปัจุบัน*/
async function fetchOrganizationActive() {
  await http
    .get(config.API.activeOrganization)
    .then(async (res) => {
      const data = res.data.result;
      if (data) {
        // activeId.value = data.activeId;
        await fetchDataTree(data.activeId);
      }
    })
    .catch((err) => {
      messageError($q, err);
    });
}

/**
 * ฟังก์ชัน fetch ข้อมูลของโครงสร้าง
 * @param id id โครงสร้าง
 */
async function fetchDataTree(id: string) {
  const tokenParsedData = await tokenParsed();
  const isSuperAdmin = tokenParsedData.role.includes("SUPER_ADMIN");
  if (!isSuperAdmin) {
    nodeTree.value = [];
  }
  await http
    .get(config.API.orgByid(id.toString()))
    .then(async (res) => {
      const data = await res.data.result;
      nodeTree.value.push(...data);
    })
    .catch((err) => {
      messageError($q, err);
    });
}

async function selectedOrg(node: NodeTree) {
  if (node.orgTreeId) {
    orgId.value = node.orgTreeId;
    dnaId.dnaRootId = node.orgRootDnaId || "";
    dnaId.dnaChild1Id = node.orgChild1DnaId || "";
    dnaId.dnaChild2Id = node.orgChild2DnaId || "";
    dnaId.dnaChild3Id = node.orgChild3DnaId || "";
    dnaId.dnaChild4Id = node.orgChild4DnaId || "";
  }
}

async function onChangeAccessType(val: string) {
  if (val === "ALL") {
    orgId.value = "";
    dnaId.dnaRootId = "";
    dnaId.dnaChild1Id = "";
    dnaId.dnaChild2Id = "";
    dnaId.dnaChild3Id = "";
    dnaId.dnaChild4Id = "";
  }
}

/**
 * ดูการเปลี่ยนแปลงข้อมูลของ `modal`
 * ถ้า modal เป็น True เรียกรายการข้อมูล API ที่เข้าถึงได้
 */
watch(modal, async (val) => {
  if (val) {
    try {
      showLoader();
      await Promise.all([fetchOrganizationActive(), fetchListApiKeyName()]);
    } finally {
      hideLoader();
    }
  }
});
</script>
<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 70%">
      <!-- header -->
      <DialogHeader :tittle="titleName" :close="onCloseDialog" />
      <q-separator />

      <q-card-section :horizontal="$q.screen.gt.xs" class="row">
        <q-card-section class="col-4">
          <div class="col-12">
            <div class="q-gutter-sm">
              <div class="row q-col-gutter-sm q-pl-sm">
                <div class="col-12">
                  <q-input dense outlined v-model="filter" label="ค้นหา">
                    <template v-slot:append>
                      <q-icon name="search" />
                    </template>
                  </q-input>
                </div>
              </div>
              <div class="bg-white tree-container-fixed q-pa-xs">
                <q-tree
                  class="q-pa-sm q-gutter-sm"
                  dense
                  default-expand-all
                  :nodes="lazy"
                  node-key="orgTreeId"
                  label-key="labelName"
                  :filter="filter?.trim()"
                  no-results-label="ไม่พบข้อมูลที่ค้นหา"
                  no-nodes-label="ไม่มีข้อมูล"
                  v-model:expanded="expanded"
                >
                  <template v-slot:default-header="prop">
                    <q-item
                      @click.stop="
                        formData.accessType !== 'ALL'
                          ? selectedOrg(prop.node)
                          : null
                      "
                      :active="orgId == prop.node.orgTreeId"
                      clickable
                      active-class="my-list-link text-primary text-weight-medium"
                      class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
                      :disable="isAPIKey || formData.accessType === 'ALL'"
                    >
                      <div>
                        <div
                          :class="
                            prop.node.isOfficer
                              ? 'text-weight-medium text-blue'
                              : 'text-weight-medium'
                          "
                        >
                          <div
                            v-if="
                              prop.node.isDeputy == true &&
                              prop.node.orgLevel == 0
                            "
                            class="text-info"
                          >
                            {{ prop.node.orgTreeName }}
                          </div>
                          <div v-else>
                            {{ prop.node.orgTreeName }}
                          </div>
                          {{ prop.node.isOfficer ? "(สกจ.)" : "" }}
                        </div>
                        <div class="text-weight-light text-grey-8">
                          {{
                            prop.node.orgCode == null ? null : prop.node.orgCode
                          }}
                          {{
                            prop.node.orgTreeShortName == null
                              ? null
                              : prop.node.orgTreeShortName
                          }}
                        </div>
                      </div>
                    </q-item>
                  </template>
                </q-tree>
              </div>
            </div>
          </div>
        </q-card-section>

        <q-separator :vertical="$q.screen.gt.xs" />

        <q-card-section class="col tree-container-fixed">
          <div class="row q-col-gutter-sm">
            <!-- ชื่อ/คำอธิบาย -->
            <div class="col-9" v-if="!isAPIKey">
              <q-input
                ref="topicRef"
                class="inputgreen"
                dense
                outlined
                v-model="formData.name"
                label="ชื่อ/คำอธิบาย"
                hide-bottom-space
                lazy-rules
                :rules="[(val:string) => !!val || 'กรุณากรอกชื่อ/คำอธิบาย']"
              />
            </div>

            <div class="col-3" v-if="!isAPIKey">
              <q-select
                ref="accessTypeRef"
                outlined
                v-model="formData.accessType"
                emit-value
                map-options
                :options="optionsAccessType"
                option-value="value"
                option-label="label"
                label="การเข้าถึง"
                dense
                lazy-rules
                borderless
                hide-bottom-space
                :rules="[(val:string) => !!val || 'กรุณาเลือกการเข้าถึง']"
                @update:model-value="onChangeAccessType"
              />
            </div>

            <!-- apiKey -->
            <div class="col-12" v-else>
              <span class="text-red">
                * API Key ด้านล่างนี้จะแสดงเพียงครั้งเดียว
                ขอให้ทำสำเนาไว้ในที่ปลอดภัย
              </span>
              <q-input dense outlined readonly bottom-slots v-model="apiKey">
                <template v-slot:append>
                  <q-btn
                    round
                    dense
                    flat
                    color="primary"
                    icon="mdi-content-copy"
                    @click.pervent="onCopyToClipboard"
                  >
                    <q-tooltip>คัดลอก</q-tooltip></q-btn
                  >
                </template>
              </q-input>
            </div>

            <!-- API ที่เข้าถึงได้ -->
            <div class="col-12">
              API ที่เข้าถึงได้
              <q-option-group
                :disable="isAPIKey"
                :options="options"
                type="checkbox"
                keep-color
                color="primary"
                v-model="formData.apiId"
              />
            </div>
          </div>
        </q-card-section>
      </q-card-section>

      <q-separator />

      <!-- footer -->
      <q-card-actions align="right" class="bg-white text-teal">
        <q-btn
          :label="!isAPIKey ? 'สร้าง API Key' : 'ปิด'"
          color="secondary"
          @click.pervent="!isAPIKey ? onCreateAPIKey() : onCloseDialog()"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style scoped>
.tree-container {
  overflow: auto;
  height: 76vh;
  border: 1px solid #e6e6e7;
  border-radius: 10px;
}

.tree-container-fixed {
  overflow: auto;
  height: 400px;
  border: 1px solid #e6e6e7;
  border-radius: 10px;
}

.my-list-link {
  color: rgb(118, 168, 222);
  border-radius: 5px;
  background: #a3d3fb48 !important;
  font-weight: 600;
  border: 1px solid rgba(175, 185, 196, 0.217);
}
</style>
