<script setup lang="ts">
import type { MemberMessageTemplateCategory } from '#/api/member/message-reach';
import type { MessageTemplateFilterForm } from '#/views/member/message-reach/types';

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

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

defineProps<{
  canManage: boolean;
  filters: MessageTemplateFilterForm;
}>();

const emit = defineEmits<{
  (event: 'create'): void;
  (event: 'search'): void;
  (event: 'update:category', value: '' | MemberMessageTemplateCategory): void;
  (event: 'update:keyword', value: string): void;
}>();

function handleCategoryChange(value: unknown) {
  emit(
    'update:category',
    String(value || '') as '' | MemberMessageTemplateCategory,
  );
  emit('search');
}
</script>

<template>
  <div class="mmr-toolbar">
    <Select
      class="mmr-select"
      :value="filters.category || ''"
      :options="MESSAGE_TEMPLATE_CATEGORY_FILTER_OPTIONS"
      @update:value="(value) => handleCategoryChange(value)"
    />

    <Input
      class="mmr-keyword-input"
      :value="filters.keyword"
      placeholder="搜索模板名称"
      allow-clear
      @update:value="(value) => emit('update:keyword', String(value ?? ''))"
      @press-enter="emit('search')"
    />

    <span class="mmr-spacer"></span>

    <Button type="primary" :disabled="!canManage" @click="emit('create')">
      新建模板
    </Button>
  </div>
</template>
