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

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

import type { PropType } from "vue";
import type { DataPositionCondition } from "@/modules/19_condition/interface/response/Main";
import type { FormPositionCondition } from "@/modules/19_condition/interface/request/Main";

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

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

const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
  fetchData: { type: Function, required: true },
  dataCondition: {
    type: Object as PropType<DataPositionCondition | undefined>,
    required: true,
  },
});

const formData = reactive<FormPositionCondition>({
  isCondition: false,
  conditionReason: "",
});

function onCloseDialog() {
  modal.value = false;
  formData.isCondition = false;
  formData.conditionReason = "";
}

function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .put(
        config.API.positionCondition + `/${props?.dataCondition?.id}`,
        formData
      )
      .then(async () => {
        await props.fetchData?.();
        onCloseDialog();
        success($q, "บันทึกข้อมูลสำเร็จ");
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

watch(modal, () => {
  if (modal.value) {
    if (props.dataCondition) {
      formData.isCondition = props.dataCondition.isCondition;
      formData.conditionReason = props.dataCondition.conditionReason;
    }
  }
});
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 30vw">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader
          :tittle="`จัดการตำแหน่งติดเงื่อนไข`"
          :close="onCloseDialog"
        />
        <q-separator />

        <q-card-section class="q-pt-none">
          <div class="row q--col-gutter-sm">
            <div class="col-12">
              <q-checkbox
                color="primary"
                keep-color
                v-model="formData.isCondition"
                label="ตำแหน่งติดเงื่อนไข
"
              />
            </div>
            <div class="col-12">
              <q-input
                dense
                outlined
                v-model="formData.conditionReason"
                label="หมายเหตุ"
                type="textarea"
              />
            </div>
          </div>
        </q-card-section>

        <q-separator />
        <q-card-actions align="right">
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
