<script setup lang="ts">
import { ref } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useLinkageStore } from "@/stores/linkage";

import DialogHeader from "./DialogHeader.vue";

const $q = useQuasar();
const { showLoader, hideLoader } = useCounterMixin();

const store = useLinkageStore();
const modal = defineModel<boolean>("modal", { required: true });

/** 1.เสียบบัตรประชาชนเข้ากับเครื่องอ่าน*/
async function fetchDeviceLists() {
  showLoader();
  await store.fetchDeviceLists($q);
  hideLoader();
}

/** 2.เลือกเครื่องอ่านบัตร*/
async function readDevice() {
  showLoader();
  await store.readDevice($q);
  await store.getInfo($q); // ดึงข้อมูล CID
  await store.postReadIdCard($q); // ดึงข้อมูล id card จากเครื่องอ่านบัตร
  await store.amiEnvironment($q);
  await store.amiConnect($q);
  await store.amiRequest($q, 9080);
  hideLoader();
}

async function verifyPin() {
  showLoader();
  await store.authentication($q);
  await store.verifyPin($q);
  hideLoader();
}

/**
 * function ต้นหาข้อมูลของ Option
 * @param val ค่าที่ต้องการฟิลเตอร์
 * @param update  อัพเดทค่า
 */
function filterOption(val: string, update: Function) {
  update(() => {
    const newVal = val.toLocaleUpperCase();
    store.devicesOp = store.devicesData.filter(
      (v: string) => v.toLocaleUpperCase().indexOf(newVal) > -1
    );
  });
}

function onClose() {
  modal.value = false;
}
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="width: 700px; max-width: 80vw">
      <DialogHeader :tittle="'เข้าสู่ระบบ Linkage Center'" :close="onClose" />
      <q-separator />
      <q-card-section>
        <q-card flat bordered>
          <q-card-section>
            <div class="row">
              <div class="text-red">
                *ต้องใช้บน Windows และต้องติดตั้ง Agent
                <a
                  href="https://linkagemgmt.bora.dopa.go.th/app/LinkageManagement-v1.11.0.zip"
                  >ลิงก์ดาวน์โหลด Agent</a
                >
              </div>
            </div>

            <q-timeline color="primary">
              <!-- เสียบบัตรประชาชนเข้ากับเครื่องอ่าน -->
              <q-timeline-entry
                title="เสียบบัตรประชาชนเข้ากับเครื่องอ่าน"
                style="font-size: 12px"
                :icon="
                  store.step === 1
                    ? 'mdi-pencil'
                    : store.step > 1
                    ? 'done'
                    : 'mdi-numeric-1'
                "
              >
                <div class="row" v-if="store.step === 1">
                  <q-btn
                    color="primary"
                    label="ดำเนินการต่อ"
                    @click="fetchDeviceLists"
                  />
                </div>
              </q-timeline-entry>

              <!-- เลือกเครื่องอ่านบัตร -->
              <q-timeline-entry
                title="เลือกเครื่องอ่านบัตร"
                :icon="
                  store.step === 2
                    ? 'mdi-pencil'
                    : store.step > 2
                    ? 'done'
                    : 'mdi-numeric-2'
                "
                :color="store.step < 2 ? 'grey-4' : ''"
              >
                <div class="row" v-if="store.step === 2">
                  <q-form
                    greedy
                    @submit.prevent
                    @validation-success="readDevice"
                  >
                    <div class="q-col-gutter-sm">
                      <div>
                        <q-select
                          dense
                          v-model="store.devices"
                          label="เลือกเครื่องอ่านบัตร"
                          outlined
                          emit-value
                          map-options
                          fill-input
                          hide-selected
                          lazy-rules
                          hide-bottom-space
                          option-label="name"
                          option-value="id"
                          class="inputgreen"
                          :options="store.devicesOp"
                          use-input
                          :rules="[(val:string) => !!val || `${'กรุณาเลือกเลือกเครื่องอ่านบัตร'}`,]"
                          @filter="(inputValue:string,doneFn:Function) => filterOption(inputValue, doneFn) "
                        >
                          <template v-slot:no-option>
                            <q-item>
                              <q-item-section class="text-grey">
                                ไม่มีข้อมูล
                              </q-item-section>
                            </q-item>
                          </template>
                        </q-select>
                      </div>

                      <div>
                        <q-btn
                          color="primary"
                          label="ดำเนินการต่อ"
                          type="submit"
                        />
                      </div></div
                  ></q-form>
                </div>
              </q-timeline-entry>

              <!-- เชื่อมต่อและใส่ PIN -->
              <q-timeline-entry
                title="เชื่อมต่อและใส่ PIN"
                :icon="
                  store.step === 3
                    ? 'mdi-pencil'
                    : store.step > 3
                    ? 'done'
                    : 'mdi-numeric-3'
                "
                :color="store.step < 3 ? 'grey-4' : ''"
              >
                <div class="row" v-if="store.step === 3">
                  <q-btn
                    color="primary"
                    label="ดำเนินการต่อ"
                    @click="verifyPin"
                  />
                </div>
              </q-timeline-entry>
            </q-timeline>
          </q-card-section>
        </q-card>
      </q-card-section>

      <q-card-actions v-if="store.tKey" align="right">
        <q-btn
          label="ยกเลิกการเชื่อมต่อ"
          color="negative"
          @click="store.disconnect($q)"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style scoped>
:deep(.q-timeline__title) {
  font-size: 15px; /* ปรับขนาดฟอนต์ตามที่ต้องการ */
  font-weight: normal; /* หรือปรับน้ำหนักฟอนต์ */
}
</style>
