<script setup lang="ts">
import type { MessageTemplateEditorForm } from '../types';

import { Form, Input, Modal, Select } from 'ant-design-vue';

import { MESSAGE_TEMPLATE_CATEGORY_OPTIONS } from '../composables/message-reach-page/constants';

defineProps<{
  canManage: boolean;
  form: MessageTemplateEditorForm;
  loading: boolean;
  open: boolean;
  submitText: string;
  submitting: boolean;
  title: string;
}>();

const emit = defineEmits<{
  (event: 'close'): void;
  (event: 'setCategory', value: 'marketing' | 'notice' | 'recall'): void;
  (event: 'setContent', value: string): void;
  (event: 'setName', value: string): void;
  (event: 'submit'): void;
}>();
</script>

<template>
  <Modal
    :open="open"
    :title="title"
    :confirm-loading="submitting"
    :ok-text="submitText"
    cancel-text="取消"
    :ok-button-props="{ disabled: !canManage || loading }"
    width="560"
    @ok="emit('submit')"
    @cancel="emit('close')"
  >
    <Form layout="vertical" class="mmr-template-modal-form">
      <Form.Item label="模板名称" required>
        <Input
          :value="form.name"
          :disabled="loading"
          placeholder="如：新品上线通知"
          @update:value="(value) => emit('setName', String(value ?? ''))"
        />
      </Form.Item>

      <Form.Item label="模板分类" required>
        <Select
          :value="form.category"
          :disabled="loading"
          :options="MESSAGE_TEMPLATE_CATEGORY_OPTIONS"
          @update:value="
            (value) =>
              emit(
                'setCategory',
                String(value || 'notice') as 'marketing' | 'notice' | 'recall',
              )
          "
        />
      </Form.Item>

      <Form.Item label="模板内容" required>
        <Input.TextArea
          :value="form.content"
          :disabled="loading"
          :rows="5"
          placeholder="支持变量：{name}姓名 {level}等级"
          @update:value="(value) => emit('setContent', String(value ?? ''))"
        />
        <div class="mmr-form-hint">支持模板变量，用于个性化内容替换</div>
      </Form.Item>
    </Form>
  </Modal>
</template>
