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

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";

import type {
  dataRowRound,
  MyObjectRoundRef,
} from "@/modules/09_leave/interface/response/specialTime";

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

/** useStore*/
const $q = useQuasar();
const SpecialTimeStore = useSpecialTimeStore();
const mixin = useCounterMixin();
const { dialogConfirm, showLoader, success, messageError, hideLoader } = mixin;
const option = ref<any[]>(SpecialTimeStore.optionStatus);

/** props*/
const props = defineProps({
  modal: { type: Boolean, default: "" },
  editCheck: { type: String, default: "" },
  date: { type: String, default: "" },
  dateFix: { type: String, default: "" },
  id: { type: String, default: "" },
  checkInStatus: { type: String, default: "" },
  checkOutStatus: { type: String, default: "" },
  closeDialog: { type: Function, default: () => {} },
  detailData: Object,
});

const checkInRef = ref<Object | null>(null);
const checkOutRef = ref<Object | null>(null);
const checkInStatusRef = ref<Object | null>(null);
const checkOutStatusRef = ref<Object | null>(null);
const reasonRef = ref<Object | null>(null);

const formData = reactive<dataRowRound>({
  checkIn: "",
  checkOut: "",
  note: "",
  checkInStatus: "NORMAL",
  checkOutStatus: "NORMAL",
  checkInEdit: false,
  checkOutEdit: false,
});

const objectRound: MyObjectRoundRef = {
  checkIn: checkInRef,
  checkOut: checkOutRef,
  checkInStatus: checkInStatusRef,
  checkOutStatus: checkOutStatusRef,
  note: reasonRef,
};

/** function validateFom*/
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();
  }
}

/** function confrim*/
function onSubmit() {
  dialogConfirm(
    $q,
    async () => {
      await approveData();
      props.closeDialog?.();
    },
    "ยืนยันการบันทึกข้อมูล",
    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
  );
}

/** function บันทึกข้อมูล*/
async function approveData() {
  showLoader();
  const body = {
    checkInTime: formData.checkIn,
    checkOutTime: formData.checkOut,
    checkInStatus: formData.checkInStatus,
    checkOutStatus: formData.checkOutStatus,
    reason: formData.note,
  };
  await http
    .put(config.API.specialTimeApprove(props.id), body)
    .then(() => {
      success($q, "บันทึกข้อมูลสำเร็จ");
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(async () => {
      SpecialTimeStore.fetchData();
      hideLoader();
    });
}

/** function closeDialog*/
function close() {
  if (props.closeDialog) {
    props.closeDialog();
  }
}

/**
 * function ค้นหาข้อมูลใน option
 * @param val คำค้นหา
 * @param update function
 */
function filterOptionFn(val: string, update: Function) {
  update(() => {
    option.value = SpecialTimeStore.optionStatus.filter(
      (e: any) => e.name.search(val) !== -1
    );
  });
}

watch(
  () => props.modal,
  () => {
    if (props.editCheck === "APPROVE") {
      formData.checkIn = "";
      formData.checkOut = "";
      formData.note = "";
    } else if (props.editCheck === "PENDING") {
      if (props.detailData) {
        if (props.detailData.checkInEdit) {
          formData.checkIn = props.detailData.startTimeMorning;
          formData.checkOut = props.detailData.endTimeAfternoon;
        } else if (
          props.detailData.checkInEdit &&
          !props.detailData.checkOutEdit
        ) {
          formData.checkIn = props.detailData.startTimeMorning;
          formData.checkOut = props.detailData.endTimeMorning;
        } else if (
          !props.detailData.checkInEdit &&
          props.detailData.checkOutEdit
        ) {
          formData.checkIn = props.detailData.startTimeAfternoon;
          formData.checkOut = props.detailData.endTimeAfternoon;
        }
        formData.note = props.detailData.note;
        formData.checkInEdit = props.detailData.checkInEdit;
        formData.checkOutEdit = props.detailData.checkOutEdit;
      }
    }
    if (props.modal === true) {
      formData.checkInStatus = "NORMAL";
      formData.checkOutStatus = "NORMAL";
    } else {
      formData.checkInStatus = props.checkInStatus;
      formData.checkOutStatus = props.checkOutStatus;
    }
  }
);
</script>

<template>
  <q-dialog v-model="props.modal" persistent>
    <q-card style="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: 60vh" class="scroll q-pa-none">
          <div class="col q-ma-md q-pa-sm bg-white border-custom">
            <q-card bordered class="border-primary text-center">
              <q-card-section class="bg-primary q-pa-sm">
                <div class="text-white text-bold">วันที่ยื่นเรื่อง</div>
              </q-card-section>

              <q-card-section class="q-pa-sm bg-white text-black">
                {{ props.date }}
              </q-card-section>
            </q-card>
          </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
                  :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 class="column">
              <q-checkbox
                disabled
                :model-value="formData.checkInEdit"
                label="ขอแก้ไขเวลาช่วงเช้า"
              />
              <q-checkbox
                disabled
                :model-value="formData.checkOutEdit"
                label="ขอแก้ไขเวลาช่วงบ่าย"
              />
            </div>
          </div>
          <div
            v-if="formData.checkInEdit"
            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="justify-between q-my-sm items-start">
              <q-select
                ref="checkInStatusRef"
                for="checkInStatus"
                emit-value
                :rules="[(val:string) => !!val || 'กรุณาเลือกสถานะช่วงเช้า']"
                hide-bottom-space
                map-options
                outlined
                full-width
                dense
                v-model="formData.checkInStatus"
                :options="option"
                option-value="id"
                option-label="name"
                label="สถานะ"
                use-input
                @filter="filterOptionFn"
              >
                <template v-slot:no-option>
                  <q-item>
                    <q-item-section class="text-grey">
                      ไม่มีข้อมูล
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
            </div>
          </div>

          <div
            v-if="formData.checkOutEdit"
            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="justify-between q-my-sm items-start"
              style="width: 100%"
            >
              <q-select
                ref="checkOutStatusRef"
                for="checkOutStatus"
                emit-value
                map-options
                outlined
                dense
                :rules="[(val:string) => !!val || 'กรุณาเลือกสถานะช่วงบ่าย']"
                hide-bottom-space
                full-width
                v-model="formData.checkOutStatus"
                :options="SpecialTimeStore.optionStatus"
                option-value="id"
                option-label="name"
                label="สถานะ"
                use-input
              >
              </q-select>
            </div>
          </div>

          <q-input
            ref="reasonRef"
            class="col-12 bg-white q-ma-md"
            outlined
            stack-label
            :rules="[(val:string) => !!val || 'กรุณาเหตุผล']"
            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"
            >
              <q-tooltip>บันทึก</q-tooltip>
            </q-btn>
          </div>
        </div>
      </form>
    </q-card>
  </q-dialog>
</template>

<style scoped lang="scss">
@use "sass:math";
.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: math.div($toggle-height, 2);
$toggle-control-size: $toggle-height - ($toggle-gutter * 2);

.toggle-control {
  display: block;
  position: relative;
  padding-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;
    }
  }
}

.border-primary {
  border: 1px solid var(--q-primary);
}
</style>
