<script setup lang="ts">
import { watch, ref } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/modules/05_command/stores/main";

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

const commandId = defineModel<string>("commandId", { required: true });
const type = defineModel<string>("type", { required: true });

const textHeader = ref<string>("");
const textBody = ref<string>("");
const textFooter = ref<string>("");

const fetchData = async () => {
  textHeader.value = "";
  textBody.value = "";
  textFooter.value = "";
};

const onSave = () => {
  console.log("textHeader===>", textHeader.value);
  console.log("textBody===>", textBody.value);
  console.log("textFooter===>", textFooter.value);
};

function clearFormat(type: string) {
  switch (type) {
    case "textHeader":
      textHeader.value = textHeader.value.replace(/<\/?[^>]+(>|$)/g, "");
      break;
    case "textBody":
      textBody.value = textBody.value.replace(/<\/?[^>]+(>|$)/g, "");
      break;
    case "textFooter":
      textFooter.value = textFooter.value.replace(/<\/?[^>]+(>|$)/g, "");
      break;

    default:
      break;
  }
}

const handleInput = (event: any, type: string) => {
  if (event.inputType === "insertFromPaste") {
    clearFormat(type);
  }
};

watch(
  () => commandId.value,
  (newValue, oldValue) => {
    if (newValue && newValue !== oldValue) {
      fetchData();
    }
  }
);
</script>

<template>
  <q-card>
    <q-card-section class="q-pt-none">
      <div class="row items-center q-col-gutter-sm">
        <div class="col-12">
          <q-label>เนื้อหาคำสั่งส่วนต้น</q-label>
          <q-field
            class="q_field_p_none"
            ref="fieldRef"
            v-model="textHeader"
            borderless
            hide-bottom-space
          >
            <template #control>
              <q-editor
                class="full-width"
                v-model="textHeader"
                min-height="5rem"
                :toolbar="store.toolbarOptions"
                @input="(e:any) => handleInput(e, 'textHeader')"
              />
            </template>
          </q-field>
        </div>

        <div class="col-12">
          <q-label>เนื้อหาคำสั่งส่วนกลาง</q-label>
          <q-field
            class="q_field_p_none"
            ref="fieldRef"
            v-model="textBody"
            borderless
            hide-bottom-space
          >
            <template #control>
              <q-editor
                class="full-width"
                v-model="textBody"
                min-height="5rem"
                :toolbar="store.toolbarOptions"
                @input="(e:any) => handleInput(e, 'textBody')"
              />
            </template>
          </q-field>
        </div>

        <div class="col-12">
          <q-label>เนื้อหาคำสั่งส่วนท้าย</q-label>
          <q-field
            class="q_field_p_none"
            ref="fieldRef"
            v-model="textFooter"
            borderless
            hide-bottom-space
          >
            <template #control>
              <q-editor
                class="full-width"
                v-model="textFooter"
                min-height="5rem"
                :toolbar="store.toolbarOptions"
                @input="(e:any) => handleInput(e, 'textFooter')"
              />
            </template>
          </q-field>
        </div>
      </div>
    </q-card-section>
    <q-card-section align="right">
      <q-btn
        for="#submitForm"
        unelevated
        dense
        class="q-px-md items-center"
        color="light-blue-10"
        label="บันทึก"
        @click="onSave"
      />
    </q-card-section>
  </q-card>
</template>
