<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'

const props = withDefaults(
  defineProps<{
    open: boolean
    mode: 'create' | 'edit'
    tree: 'ตู้เอกสาร' | 'ลิ้นชัก' | 'แฟ้ม' | 'แฟ้มย่อย'
    name?: string
  }>(),
  {
    open: false,
  },
)

const emit = defineEmits(['update:open', 'update:name', 'submit'])
const offensiveWord = ref<boolean>()
const errorMessage = ref<string>('')
const inputNull = ref<boolean>(false)

function checkOffensiveWord(input: string) {
  return /[\\?%:|"<>#]/.test(input)
}

function reset() {
  offensiveWord.value = undefined
  emit('update:name', undefined)
}

function keydown(e: KeyboardEvent) {
  if (e.key === 'Escape' && props.open === true) {
    emit('update:open', false)
    reset()
  }
}

function submit() {
  emit('submit', {
    mode: props.mode,
    name: props.name?.trim(),
  })

  emit('update:open', !open), reset()
}

onMounted(() => window.addEventListener('keydown', keydown))
onUnmounted(() => window.addEventListener('keydown', keydown))
</script>

<template>
  <q-drawer
    overlay
    bordered
    class="q-pa-md"
    side="right"
    tabindex="0"
    v-click-outside="() => ($emit('update:open', false), reset())"
    :width="300"
    :breakpoint="500"
    :model-value="open"
    @update:model-value="(v) => $emit('update:open', v)"
  >
    <q-form @submit.prevent="submit" v-if="open">
      <q-toolbar class="q-mb-md q-pa-none">
        <q-toolbar-title>
          <span class="text-weight-bold text-primary" v-if="mode === 'create'">
            สร้าง{{ tree }}
          </span>
          <span class="text-weight-bold text-primary" v-if="mode === 'edit'">
            แก้ไข{{ tree }}
          </span>
        </q-toolbar-title>
        <q-btn
          v-close-popup
          flat
          round
          dense
          icon="close"
          color="red"
          @click="
            () => {
              $emit('update:open', !open)
            }
          "
          id="folderFormIconClose"
        />
      </q-toolbar>

      <section class="q-mb-md">
        <span class="text-weight-bold">ชื่อ{{ tree }}</span>
        <q-input
          ref="nameInput"
          outlined
          dense
          class="q-my-sm"
          placeholder="กรอกชื่อ"
          :model-value="props.name"
          :error-message="
            !!props.name
              ? 'คำต้องห้านจะเปลี่ยนเป็น - เมื่อกดสร้าง'
              : 'โปรดกรอกข้อมูล'
          "
          :error="offensiveWord"
          :rules="[(v) => !!props.name]"
          @update:model-value="
            (v) => {
              $emit('update:name', v)
              offensiveWord = checkOffensiveWord(v as string)
            }
          "
          id="folderNameInput"
        />
      </section>

      <section :style="{ display: 'flex', gap: '.5rem' }">
        <q-btn label="บันทึก" type="submit" color="primary" id="FoldeSubmit" />
        <q-btn
          label="ยกเลิก"
          type="reset"
          color="primary"
          flat
          @click="
            () => {
              $emit('update:open', false), reset()
            }
          "
          id="folderBtnCancel"
        />
      </section>
    </q-form>
  </q-drawer>
</template>

<style scoped>
.no-resize :deep(textarea) {
  resize: none;
}
</style>
