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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useOrganizational } from "@/modules/02_organization/store/organizational";

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

const $q = useQuasar();
const store = useOrganizational();
const {
  dialogConfirm,
  date2Thai,
  showLoader,
  hideLoader,
  messageError,
  success,
  convertDateToAPI,
} = useCounterMixin();

/**
 * porps
 */
const props = defineProps({
  modal: Boolean,
  close: Function,
  fetchActive: {
    type: Function,
    require: true,
    default: () => "Function fetchActive",
  },
});

const dateTime = ref<Date | null>(null); //เวลาเผยแพร่

/**
 * กำหนดวันที่เผยแพร่ไม่ให้น้อยกว่าวันปัจจุบัน
 */
const minDate = computed(() => {
  const date = new Date();
  date.setDate(date.getDate() + 1);
  return date;
});

/**
 * ฟังก์ชันบันทึกการตั้งเวลาเผยแพร่
 */
function onSubmit() {
  dialogConfirm($q, () => {
    showLoader();
    http
      .put(config.API.orgSetDateTime(store.draftId as string), {
        orgPublishDate: convertDateToAPI(dateTime.value),
      })
      .then(async () => {
        await props.fetchActive();
        await success($q, "บันทึกข้อมูลสำเร็จ");
        props.close?.();
      })
      .catch((e) => {
        messageError($q, e);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * ฟังก์ชันยืนยันการเผยแพร่โครงาสร้าง
 */
function onClickPublish() {
  dialogConfirm(
    $q,
    () => {
      showLoader();
      http
        .get(config.API.organizationPublishGet)
        .then(async () => {
          await props.fetchActive();
          await props.close?.();
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          hideLoader();
        });
    },
    "ยืนยันการเผยเเพร่ข้อมูล",
    "ต้องการยืนยันการเผยเเพร่ข้อมูลนี้ใช่หรือไม่?"
  );
}

/**
 * ดูการเปลี่ยนแปลงของ props.modal
 */
watch(
  () => props.modal,
  () => {
    if (props.modal) {
      dateTime.value = store.orgPublishDate ? store.orgPublishDate : null;
    }
  }
);
</script>

<template>
  <template>
    <q-dialog v-model="props.modal" persistent>
      <q-card style="min-width: 18vw">
        <q-form greedy @submit.prevent @validation-success="onSubmit">
          <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"
                  :min-date="minDate"
                  class="inputgreen"
                >
                  <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:string) => !!val || `${'กรุณาเลือกวันที่เผยแพร่'}`,
                      ]"
                    >
                      <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">
            <!-- <q-btn flat color="blue-7" icon="public" @click="onClickPublish()">
              <q-tooltip>เผยแพร่ข้อมูลทันที</q-tooltip>
            </q-btn> -->
            <q-space />
            <q-btn type="submit" :label="`บันทึก`" color="public" />
          </q-card-actions>
        </q-form>
      </q-card>
    </q-dialog>
  </template>
</template>
