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

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

import {
  MESSAGE_REACH_CHANNEL_FILTER_OPTIONS,
  MESSAGE_REACH_STATUS_FILTER_OPTIONS,
} from '../composables/message-reach-page/constants';

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

const emit = defineEmits<{
  (event: 'create'): void;
  (event: 'search'): void;
  (event: 'update:channel', value: '' | MemberMessageReachChannel): void;
  (event: 'update:keyword', value: string): void;
  (event: 'update:status', value: '' | MemberMessageReachStatus): void;
}>();

function handleStatusChange(value: unknown) {
  emit('update:status', String(value || '') as '' | MemberMessageReachStatus);
  emit('search');
}

function handleChannelChange(value: unknown) {
  emit('update:channel', String(value || '') as '' | MemberMessageReachChannel);
  emit('search');
}
</script>

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

    <Select
      class="mmr-select"
      :value="filters.channel || ''"
      :options="MESSAGE_REACH_CHANNEL_FILTER_OPTIONS"
      @update:value="(value) => handleChannelChange(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>
