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

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

/** importType*/
import type { ListApi } from "@/modules/06_webservices/interface/index/Main";
import type { FormCreate } from "@/modules/06_webservices/interface/request/Main";
import type { ResApiName } from "@/modules/06_webservices/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 isAPIKey = ref<boolean>(false); //status API Key
const apiKey = ref<string>(""); // API Key
const options = ref<ListApi[]>([]); //รายการ API ที่เข้าถึงได้

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

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

/** ฟังก์ชันเรียกรายการข้อมูล API ที่เข้าถึงได้*/
function fetchListApiKeyName() {
  showLoader();
  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);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ฟังก์ชันยืนยันการสร้าง API Key */
function onCreateAPIKey() {
  topicRef.value.validate();
  //เช็คข้อมูล ชื่อ/คำอธิบาย
  if (topicRef.value.validate()) {
    // ช็คข้อมูล รายการ API ที่เข้าถึงได้ที่เลือก ถ้ามีแสดง popup ยืนยันการสร้าง API Key
    if (formData.apiId.length > 0) {
      dialogConfirm($q, async () => {
        showLoader();
        await http
          .post(config.API.apiKeyMain, {
            ...formData,
            name: formData.name.replace(/\s+/g, ""), //ตัดช่องว่างทั้งหมด
          })
          .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.apiId = [];
}

/**
 * ดูการเปลี่ยนแปลงข้อมูลของ `modal`
 * ถ้า modal เป็น True เรียกรายการข้อมูล API ที่เข้าถึงได้
 */
watch(modal, (val) => {
  if (val) {
    fetchListApiKeyName();
  }
});
</script>
<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="width: 700px; max-width: 80vw">
      <!-- header -->
      <DialogHeader :tittle="titleName" :close="onCloseDialog" />
      <q-separator />

      <q-card-section>
        <div class="row q-col-gutter-sm">
          <!-- ชื่อ/คำอธิบาย -->
          <div class="col-12" 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>

          <!-- 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-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></style>
