<script setup lang="ts">
import { ref } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/components/DialogHeader.vue";
import type { FormDateTimeRef } from "@/modules/02_organizationalNew/interface/index/Main";

const props = defineProps({
  modal: Boolean,
  close: Function,
});

const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm, date2Thai } = mixin;

const dateTimeRef = ref<Object | null>(null);

const dateTime = ref<Date>();

/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const objectRef: FormDateTimeRef = {
  dateTime: dateTimeRef,
};

/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function validateForm() {
  const hasError = [];
  for (const key in objectRef) {
    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
      const property = objectRef[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }
  if (hasError.every((result) => result === true)) {
    onSubmit();
  } else {
  }
}

/** ฟังชั่น บันทึก */
function onSubmit() {
  dialogConfirm($q, () => {
    console.log(dateTime.value);
  });
}
</script>
<template>
  <template>
    <q-dialog v-model="props.modal" persistent>
      <q-card style="min-width: 10vw">
        <form @submit.prevent="validateForm">
          <DialogHeader :tittle="`ตั้งเวลาเผยแพร่`" :close="props.close" />
          <q-separator />

          <q-card-section>
            <div class="row q-col-gutter-sm">
              <div class="col-12">
                <datepicker
                  menu-class-name="modalfix"
                  v-model="dateTime"
                  :locale="'th'"
                  autoApply
                  borderless
                  :enableTimePicker="false"
                  week-start="0"
                >
                  <template #year="{ year }">
                    {{ year + 543 }}
                  </template>
                  <template #year-overlay-value="{ value }">
                    {{ parseInt(value + 543) }}
                  </template>
                  <template #trigger>
                    <q-input
                      for="#dateTime"
                      ref="dateTimeRef"
                      outlined
                      dense
                      hide-bottom-space
                      :model-value="
                        dateTime != null ? date2Thai(dateTime) : null
                      "
                      label="วันเวลาเผยแพร่"
                      :rules="[
                        (val) => !!val || `${'กรุณาเลือกวันเวลาเผยแพร่'}`,
                      ]"
                      lazy-rules
                    >
                      <template v-slot:prepend>
                        <q-icon
                          name="event"
                          class="cursor-pointer"
                          style="color: var(--q-primary)"
                        >
                        </q-icon>
                      </template>
                    </q-input>
                  </template>
                </datepicker>
              </div>
            </div>
          </q-card-section>
          <q-separator />
          <q-card-actions align="right" class="bg-white text-teal">
            <q-btn type="submit" :label="`บันทึก`" color="public" />
          </q-card-actions>
        </form>
      </q-card>
    </q-dialog>
  </template>
</template>
