<script setup lang="ts">
import { ref, reactive, watchEffect, watch } from "vue";
import type {
  dataRowRound,
  MyObjectRoundRef,
} from "@/modules/09_leave/interface/response/specialTime";
import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";

const SpecialTimeStore = useSpecialTimeStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm, date2Thai } = mixin;
const currentDate = ref<Date | null>(new Date());
const startTimeMorningRef = ref<Object | null>(null);
const endTimeMorningRef = ref<Object | null>(null);
const startTimeAfternoonRef = ref<Object | null>(null);
const endTimeAfternoonRef = ref<Object | null>(null);

const formData = reactive<dataRowRound>({
  startTimeMorning: "",
  endTimeMorning: "",
  startTimeAfternoon: "",
  endTimeAfternoon: "",
  note: "",
});

const objectRound: MyObjectRoundRef = {
  startTimeMorning: startTimeMorningRef,
  endTimeMorning: endTimeMorningRef,
  startTimeAfternoon: startTimeAfternoonRef,
  endTimeAfternoon: endTimeAfternoonRef,
};

function validateForm() {
  const hasError = [];
  for (const key in objectRound) {
    if (Object.prototype.hasOwnProperty.call(objectRound, key)) {
      const property = objectRound[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 {
    console.log(hasError);
  }
}
function onSubmit() {
  dialogConfirm(
    $q,
    async () => {
      props.closeDialog?.();
    },
    "ยืนยันการบันทึกข้อมูล",
    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
  );
}
const props = defineProps({
  modal: { type: Boolean, default: "" },
  editCheck: { type: String, default: "" },
  date: { type: String, default: "" },
  dateFix: { type: String, default: "" },
  closeDialog: { type: Function, default: () => {} },
  detailData: Object,
});

function close() {
  if (props.closeDialog) {
    props.closeDialog();
  }
}
watch(
  () => props.modal,
  (newDetailData, oldDetailData) => {
    if (props.editCheck === "APPROVE") {
      formData.startTimeMorning = "";
      formData.endTimeMorning = "";
      formData.startTimeAfternoon = "";
      formData.endTimeAfternoon = "";
      formData.note = "";
    } else if (props.editCheck === "PENDING") {
      if (props.detailData) {
        formData.startTimeMorning = props.detailData.startTimeMorning;
        formData.endTimeMorning = props.detailData.endTimeMorning;
        formData.startTimeAfternoon = props.detailData.startTimeAfternoon;
        formData.endTimeAfternoon = props.detailData.endTimeAfternoon;
        formData.note = props.detailData.note;
      }
    }
  }
);
</script>

<template>
  <q-dialog v-model="props.modal" persistent>
    <q-card style="min-width: 350px" class="bg-grey-11">
      <form @submit.prevent="validateForm">
        <DialogHeader
          :tittle="
            props.editCheck === 'PENDING'
              ? 'อนุมัติคำขอ'
              : props.detailData
              ? `REJECT ${props.detailData.round}`
              : ''
          "
          :close="close"
        />
        <q-separator color="grey-4" />
        <q-card-section style="max-height: 50vh" class="scroll q-pa-none">
          <div
            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
          >
            <div>
              <q-card class="my-card bg-primary text-white">
                <div>
                  <q-card-section class="border-primary">
                    <div class="text center">เวลาที่กรอก</div>
                  </q-card-section>
                </div>
                <q-separator dark />
                <div>
                  <q-card-actions
                    class="my-card bg-white text-black border-primary"
                  >
                    {{ props.date }}
                  </q-card-actions>
                </div>
              </q-card>
            </div>
          </div>

          <div
            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
          >
            <datepicker
              menu-class-name="modalfix"
              v-model="props.dateFix"
              :locale="'th'"
              autoApply
              :enableTimePicker="false"
              week-start="0"
              disabled
            >
              <template #year="{ year }">{{ year + 543 }}</template>
              <template #year-overlay-value="{ value }">{{
                parseInt(value + 543)
              }}</template>
              <template #trigger>
                <q-input
                  for="selectDate"
                  dense
                  outlined
                  readonly
                  lazy-rules
                  :model-value="props.dateFix"
                  hide-bottom-space
                  :label="`${'วันที่ขอแก้ไข'}`"
                >
                  <template v-slot:prepend>
                    <q-icon name="event" class="cursor-pointer text-primary">
                    </q-icon>
                  </template>
                </q-input>
              </template>
            </datepicker>
          </div>
          <div
            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
          >
            <p style="color: #06884d; font-size: 16px">ครึ่งเช้า</p>
            <div class="row justify-between q-my-sm items-start">
              <p class="q-ma-none mt">เวลาเข้างาน</p>
              <q-input
                ref="startTimeMorningRef"
                class="inputgreen"
                dense
                lazy-rules
                borderless
                outlined
                v-model="formData.startTimeMorning"
                :rules="[
                  (val) => !!val || 'กรุณากรอกเวลาเข้างาน',
                  (val) => {
                    if (val && formData.endTimeMorning) {
                      if (val > formData.endTimeMorning) {
                        return 'ต้องน้อยกว่าเวลาออกงาน';
                      }
                      if (
                        val >= formData.startTimeAfternoon &&
                        val <= formData.endTimeAfternoon
                      ) {
                        return 'ช่วงเวลาทับซ้อนกับช่วงบ่าย';
                      }
                      if (val === formData.endTimeMorning) {
                        return 'เวลาเข้างานช่วงเช้าต้องไม่ซ้ำกับออกงานเช้า';
                      }
                    }
                    return true;
                  },
                ]"
                hide-bottom-space
                type="time"
                style="width: 140px"
              />
            </div>
            <q-separator inset />
            <div class="row items-start q-my-sm justify-between">
              <p class="q-ma-none mt">เวลาออกงาน</p>
              <q-input
                ref="endTimeMorningRef"
                class="inputgreen"
                dense
                v-model="formData.endTimeMorning"
                lazy-rules
                borderless
                outlined
                :rules="[
                  (val) => !!val || 'กรุณากรอกเวลาออกงาน',
                  (val) => {
                    if (val && formData.startTimeMorning) {
                      if (val < formData.startTimeMorning) {
                        return 'ต้องมากกว่าเวลาเข้างาน';
                      }
                      if (
                        val >= formData.startTimeAfternoon &&
                        val <= formData.endTimeAfternoon
                      ) {
                        return 'ช่วงเวลาทับซ้อนกับช่วงบ่าย';
                      }
                      if (val === formData.startTimeMorning) {
                        return 'เวลาออกงานช่วงเช้าต้องไม่ซ้ำกับเข้างานเช้า';
                      }
                    }
                    return true;
                  },
                ]"
                hide-bottom-space
                type="time"
                style="width: 140px"
              />
            </div>
          </div>
          <div
            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
          >
            <p style="color: #06884d; font-size: 16px">ครึ่งบ่าย</p>
            <div class="row justify-between q-my-sm items-start">
              <p class="q-ma-none mt">เวลาเข้างาน</p>
              <q-input
                ref="startTimeAfternoonRef"
                :rules="[
                  (val) => !!val || 'กรุณากรอกเวลาเข้างาน',
                  (val) => {
                    if (val && formData.endTimeAfternoon) {
                      if (val > formData.endTimeAfternoon) {
                        return 'ต้องน้อยกว่าเวลาออกงาน';
                      }
                      if (
                        val >= formData.startTimeMorning &&
                        val <= formData.endTimeMorning
                      ) {
                        return 'ช่วงเวลาทับซ้อนกับช่วงเช้า';
                      }
                      if (val === formData.endTimeAfternoon) {
                        return 'เวลาเข้างานช่วงบ่ายต้องไม่ซ้ำกับออกงานช่วงบ่าย';
                      }
                    }
                    return true;
                  },
                ]"
                class="inputgreen"
                dense
                lazy-rules
                borderless
                v-model="formData.startTimeAfternoon"
                hide-bottom-space
                type="time"
                outlined
                style="width: 140px"
              />
            </div>
            <q-separator inset />
            <div class="row items-start q-my-sm justify-between">
              <p class="q-ma-none mt">เวลาออกงาน</p>
              <q-input
                ref="endTimeAfternoonRef"
                :rules="[
                  (val) => !!val || 'กรุณากรอกเวลาออกงาน',
                  (val) => {
                    if (val && formData.startTimeAfternoon) {
                      if (val < formData.startTimeAfternoon) {
                        return 'ต้องมากกว่าเวลาเข้างาน';
                      }
                      if (
                        val >= formData.startTimeMorning &&
                        val <= formData.endTimeMorning
                      ) {
                        return 'ช่วงเวลาทับซ้อนกับช่วงเช้า';
                      }
                      if (val === formData.startTimeAfternoon) {
                        return 'เวลาออกงานช่วงบ่ายต้องไม่ซ้ำกับเข้างานช่วงบ่าย';
                      }
                    }
                    return true;
                  },
                ]"
                class="inputgreen"
                dense
                v-model="formData.endTimeAfternoon"
                lazy-rules
                borderless
                hide-bottom-space
                type="time"
                outlined
                style="width: 140px"
              />
            </div>
          </div>
          <q-input
            class="col-12 bg-white q-ma-md"
            outlined
            stack-label
            v-model="formData.note"
            label="เหตุผล"
            hide-bottom-space
            type="textarea"
          ></q-input>
        </q-card-section>
        <q-separator color="grey-4" />
        <div class="q-pa-xs">
          <div class="row justify-end">
            <q-btn
              dense
              unelevated
              label="บันทึก"
              color="public"
              id="onSubmit"
              type="submit"
              class="q-px-md"
            >
              <!-- icon="mdi-content-save-outline" -->
              <q-tooltip>บันทึก</q-tooltip>
            </q-btn>
          </div>
        </div>
      </form>
    </q-card>
  </q-dialog>
</template>

<style scoped lang="scss">
.mt {
  margin-top: 10px;
}
.border_custom {
  border-radius: 6px !important;
  border: 1px solid #e1e1e1;
}
$toggle-background-color-on: #06884d;
$toggle-background-color-off: darkgray;
$toggle-control-color: white;
$toggle-width: 40px;
$toggle-height: 25px;
$toggle-gutter: 3px;
$toggle-radius: 50%;
$toggle-control-speed: 0.15s;
$toggle-control-ease: ease-in;

// These are our computed variables
// change at your own risk.
$toggle-radius: $toggle-height / 2;
$toggle-control-size: $toggle-height - ($toggle-gutter * 2);

.toggle-control {
  display: block;
  position: relative;
  papproveing-left: $toggle-width;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  user-select: none;

  input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  input:checked ~ .control {
    background-color: $toggle-background-color-on;

    &:after {
      left: $toggle-width - $toggle-control-size - $toggle-gutter;
    }
  }

  .control {
    position: absolute;
    top: -7px;
    left: -15px;
    height: $toggle-height;
    width: $toggle-width;
    border-radius: $toggle-radius;
    background-color: $toggle-background-color-off;
    transition: background-color $toggle-control-speed $toggle-control-ease;

    &:after {
      content: "";
      position: absolute;
      left: $toggle-gutter;
      top: $toggle-gutter;
      width: $toggle-control-size;
      height: $toggle-control-size;
      border-radius: $toggle-radius;
      background: $toggle-control-color;
      transition: left $toggle-control-speed $toggle-control-ease;
    }
  }
}
</style>
