<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useSupportStore } from "@/modules/00_support/store/Main";
import DialogHeader from "@/components/DialogHeader.vue";

const store = useSupportStore();

const title = ref<string>("");
const titleRef = ref();
const categoryId = ref<string>("");
const categoryRef = ref();
const options = ref<{ label: string; value: string }[]>([]);

const props = defineProps({
  modal: {
    type: Boolean,
    default: false,
  },
  clickClose: {
    type: Function,
    default: () => {},
  },
});

onMounted(async () => {
  await store.fetchIssueCategory();
  if (store.issueCategory) {
    options.value = store.issueCategory?.result.map((v) => ({
      label: v.name,
      value: v.id,
    }));
  }
});

async function onSubmit() {
  titleRef.value.validate();
  categoryRef.value.validate();
  if (titleRef.value.hasError || categoryRef.value.hasError) return "";
  await store.newIssue(title.value, categoryId.value).then(() => {
    props.clickClose();
    title.value = "";
    categoryId.value = "";
  });
}
</script>

<template>
  <q-dialog v-model="props.modal" persistent>
    <q-card style="width: 40vw; max-width: 40vw">
      <q-form ref="myForm" @submit.prevent.stop="onSubmit">
        <DialogHeader tittle="แจ้งปัญหา" :close="clickClose" />
        <q-separator />
        <q-card-section class="q-pa-sm bg-grey-1">
          <div class="row col-12 q-col-gutter-sm">
            <div class="col-xs-12">
              <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
                <q-select
                  outlined
                  dense
                  hide-bottom-space
                  emit-value
                  map-options
                  lazy-rules
                  ref="categoryRef"
                  class="full-width inputgreen cursor-pointer"
                  option-value="value"
                  option-label="label"
                  label="หมวดหมู่"
                  v-model="categoryId"
                  :options="options"
                  :rules="[
                    (val) =>
                      (val !== null && val !== '') || 'กรุณาเลือหมวดหมู่',
                  ]"
                />
                <q-input
                  type="textarea"
                  ref="titleRef"
                  outlined
                  dense
                  hide-bottom-space
                  lazy-rules
                  class="full-width inputgreen cursor-pointer"
                  label="รายละเอียด"
                  v-model="title"
                  :rules="[
                    (val) => (val && val.length > 0) || 'กรุณากรอกชื่อเรื่อง',
                  ]"
                />
              </div>
            </div>
          </div>
        </q-card-section>
        <q-separator />
        <q-card-actions align="right">
          <q-btn
            dense
            unelevated
            label="แจ้งปัญหา"
            color="public"
            type="submit"
            class="q-px-md"
            v-close-popup
          >
            <!-- icon="mdi-content-save-outline" -->
            <q-tooltip>แจ้งปัญหา</q-tooltip>
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>
