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

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

/** importType*/
import type { QTableProps } from "quasar";
import type { PropType } from "vue";
import type { DataPosition } from "@/modules/04_registryPerson/interface/response/Edit";

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

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

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

const props = defineProps({
  dataSort: Array as PropType<DataPosition[]>,
  columns: Array as PropType<QTableProps["columns"]>,
  fetchData: Function,
});
const profileId = ref<string>(route.params.id.toString()); //id profile

/** ข้อมูล Table*/
const rowsData = ref<DataPosition[]>([]);

// /**
//  * fiunction จัดลำดับ
//  * @param from ตำแหน่งปัจุบัน
//  * @param to ตำแหน่งที่จะย้ายไป
//  */
// function onDrop(from: number, to: number) {
//   rowsData.value.splice(to - 1, 0, rowsData.value.splice(from - 1, 1)[0]);
// }

/** function บันทึกการจัดลำดับ*/
function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    const body = rowsData.value.map((e: any) => e.id);
    await http
      .put(config.API.salaryTemp + `/change/sort/${profileId.value}`, {
        id: body,
      })
      .then(async () => {
        await success($q, "บันทึกข้อมูลสำเร็จ");
        props.fetchData?.();
        modal.value = false;
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

let draggedIndex = -1; // index ของ item ที่ถูก drag
const cardSectionRef = ref<HTMLElement | null>(null); // ref สำหรับ container ที่จะ scroll

/**
 *  ฟังก์ชันนี้ใช้สำหรับการ drag item
 * @param index index ของ item ที่ถูก drag
 */
function onDragStart(index: number) {
  //จะทำการ set draggedIndex เป็น index ที่ถูก drag
  draggedIndex = index;
}

/**
 * ฟังก์ชันนี้ใช้สำหรับการ drop item
 * @param targetIndex index ที่จะ drop
 */
function onDrop(targetIndex: number) {
  // ถ้า draggedIndex เป็น -1 หรือ draggedIndex เท่ากับ targetIndex จะไม่ทำอะไร
  if (draggedIndex === -1 || draggedIndex === targetIndex) return;
  // ถ้า draggedIndex ไม่เท่ากับ targetIndex จะทำการย้าย item
  const item = rowsData.value.splice(draggedIndex, 1)[0];
  rowsData.value.splice(targetIndex, 0, item);
  draggedIndex = -1;
}

/**
 *  ฟังก์ชันนี้ใช้สำหรับการเลื่อน scroll ของ container
 * @param e DragEvent
 * @description ทำให้ scroll container ได้เวลา drag อยู่ใกล้ขอบ
 */
function onDragOver(e: DragEvent) {
  let container = cardSectionRef.value;
  // ถ้าเป็น vue proxy ให้ใช้ container.$el
  if (container && (container as any).$el) {
    container = (container as any).$el;
  }
  // ถ้า container ไม่ใช่ HTMLElement ให้แสดง warning
  if (
    !container ||
    typeof (container as HTMLElement).getBoundingClientRect !== "function"
  ) {
    console.warn("container is not HTMLElement:", container);
    return;
  }
  const rect = (container as HTMLElement).getBoundingClientRect();
  const offset = 40; // ระยะห่างจากขอบที่ต้องการให้ scroll
  const scrollSpeed = 30; // ความเร็วในการ scroll

  // ถ้า mouse อยู่ใกล้ขอบบนหรือขอบล่างของ container ให้ scroll
  if (e.clientY < rect.top + offset) {
    (container as HTMLElement).scrollTop -= scrollSpeed;
  } else if (e.clientY > rect.bottom - offset) {
    (container as HTMLElement).scrollTop += scrollSpeed;
  }
}

watch(modal, async () => {
  if (modal.value && props.dataSort) {
    const dataList = props.dataSort;
    rowsData.value.push(...dataList);
  } else {
    rowsData.value = [];
  }
});
</script>
<template>
  <q-dialog v-model="modal" persistent full-width>
    <q-card style="min-width: 80vw">
      <DialogHeader :tittle="`จัดลำดับการ`" :close="() => (modal = false)" />
      <q-separator />
      <q-card-section
        ref="cardSectionRef"
        style="max-height: 70vh; overflow-y: auto"
        @dragover.prevent="onDragOver"
      >
        <q-table
          class="custom-header-table"
          v-if="rowsData.length > 0"
          flat
          bordered
          :rows="rowsData"
          :columns="columns"
          :rows-per-page-options="[0]"
          row-key="id"
          hide-bottom
          hide-pagination
        >
          <template v-slot:body="props">
            <q-tr
              :props="props"
              draggable="true"
              @dragstart="onDragStart(props.rowIndex)"
              @drop="onDrop(props.rowIndex)"
              @dragover.prevent.stop="onDragOver"
              style="cursor: move"
            >
              <q-td v-for="col in props.cols" :key="col.id">
                <div v-if="col.name === 'no'">
                  {{ props.rowIndex + 1 }}
                </div>
                <div v-else-if="col.name === 'organization'" class="text-html">
                  {{
                    findOrgNameHtml({
                      root: props.row.orgRoot,
                      child1: props.row.orgChild1,
                      child2: props.row.orgChild2,
                      child3: props.row.orgChild3,
                      child4: props.row.orgChild4,
                    })
                  }}
                </div>
                <div v-else-if="col.name === 'commandCode'">
                  {{ col.value ? col.value : "-" }}
                </div>
                <div v-else>
                  {{ col.value ? col.value : "-" }}
                </div>
              </q-td>
            </q-tr>
          </template>
        </q-table>
        <div v-else class="bg-grey-1 text-center q-pa-md">ไม่มีข้อมูล</div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right">
        <q-btn
          :disable="rowsData.length === 0"
          type="submit"
          :label="`บันทึก`"
          color="public"
          @click="onSubmit"
        >
          <q-tooltip>บันทึก</q-tooltip>
        </q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

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