<script setup lang="ts">
import { useSupportStore } from "@/modules/00_support/store/Main";
import dialogHeader from "@/components/DialogHeader.vue";
const store = useSupportStore();

const [open] = defineModel<Boolean>();
const input = defineModel<string>("input");
const prop = withDefaults(
  defineProps<{
    open: boolean;
    status: string;
    category: string;
    input: string;
  }>(),
  {}
);

function controlAction(
  categoryId: string = "",
  statusAction?: string,
  name: string = ""
) {
  if (statusAction == "add") {
    store.newCategory(name);
  }
  if (statusAction == "edit") store.editCategory(categoryId, name);
}

function checkStatus(status: string) {
  if (status == "add") return "เพิ่มประเภทของปัญหา";
  if (status == "edit") return "แก้ไขประเภทของปัญหา";
}
</script>

<template>
  <q-dialog v-model="prop.open" class="dialog" persistent>
    <q-card style="min-width: 350px" class="bg-grey-11">
      <q-card-section class="flex justify-between" style="padding: 0">
        <dialog-header
          :tittle="checkStatus(prop.status)"
          :close="
            () => {
              open = false;
              if (status == 'add') input = '';
            }
          "
        />
      </q-card-section>

      <q-separator color="grey-4" />
      <q-card-section class="q-pa-none align-center">
        <div class="bg-white q-ma-sm border_black">
          <q-input
            hide-bottom-space
            outlined
            dense
            label="ประเภทของปัญหา"
            lazy-rules
            borderless
            v-model="input"
            @keyup.enter="
              () => {
                controlAction(prop.category, prop.status, input);
                input = '';
                open = false;
              }
            "
          />
        </div>
      </q-card-section>
      <q-separator color="grey-4" />
      <q-card-actions align="right">
        <q-btn
          id="onSubmit"
          type="submit"
          dense
          unelevated
          label="บันทึก"
          color="public"
          class="q-px-md"
          @click="
            () => {
              controlAction(prop.category, prop.status, input);
              input = '';
              open = false;
            }
          "
        >
          <q-tooltip>บันทึกข้อมูล</q-tooltip>
        </q-btn>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>
