<script setup lang="ts">
import { computed, ref, watch } from 'vue';

import { EasyFlowFormModal } from '@easyflow/common-ui';
import { $t } from '@easyflow/locales';

import { ElForm, ElFormItem, ElInput, ElTreeSelect } from 'element-plus';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
  data: {
    type: Object as any,
    default: () => ({}),
  },
  parentOptions: {
    type: Array as any,
    default: () => [],
  },
  disableParent: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['update:modelValue', 'submit']);

const formRef = ref();
const form = ref<any>({
  id: '',
  collectionId: '',
  categoryName: '',
  parentId: '0',
});

watch(
  () => props.data,
  (newData: any) => {
    form.value = {
      id: newData?.id || '',
      collectionId: newData?.collectionId || '',
      categoryName: newData?.categoryName || '',
      parentId:
        newData?.parentId === undefined || newData?.parentId === null
          ? '0'
          : String(newData.parentId),
    };
  },
  { immediate: true, deep: true },
);

const rules = computed(() => ({
  categoryName: [
    {
      required: true,
      message: $t('message.required'),
      trigger: 'blur',
    },
  ],
  parentId: [
    {
      required: true,
      message: $t('message.required'),
      trigger: 'change',
    },
  ],
}));

const closeDialog = () => {
  emit('update:modelValue', false);
};

const handleSubmit = () => {
  formRef.value?.validate((valid: boolean) => {
    if (!valid) {
      return;
    }
    emit('submit', {
      ...form.value,
      categoryName: form.value.categoryName.trim(),
      parentId: String(form.value.parentId || '0'),
    });
  });
};
</script>

<template>
  <EasyFlowFormModal
    :open="modelValue"
    :title="title"
    width="520px"
    :confirm-text="$t('button.save')"
    @update:open="emit('update:modelValue', $event)"
    @cancel="closeDialog"
    @confirm="handleSubmit"
  >
    <ElForm
      ref="formRef"
      :model="form"
      :rules="rules"
      label-position="top"
      class="easyflow-modal-form easyflow-modal-form--compact"
    >
      <ElFormItem
        :label="$t('documentCollection.faq.categoryName')"
        prop="categoryName"
      >
        <ElInput
          v-model="form.categoryName"
          :placeholder="$t('documentCollection.faq.categoryNamePlaceholder')"
        />
      </ElFormItem>
      <ElFormItem
        :label="$t('documentCollection.faq.parentCategory')"
        prop="parentId"
      >
        <ElTreeSelect
          v-model="form.parentId"
          :disabled="disableParent"
          check-strictly
          clearable
          :data="parentOptions"
          node-key="id"
          :props="{ label: 'categoryName', children: 'children' }"
          :placeholder="$t('documentCollection.faq.parentCategoryPlaceholder')"
        />
      </ElFormItem>
    </ElForm>
  </EasyFlowFormModal>
</template>
