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

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

import { POINTS_MALL_PRODUCT_STATUS_FILTER_OPTIONS } from '../composables/points-mall-page/constants';

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

const emit = defineEmits<{
  (event: 'create'): void;
  (event: 'reset'): void;
  (event: 'search'): void;
  (event: 'setKeyword', value: string): void;
  (event: 'setStatus', value: '' | 'disabled' | 'enabled'): void;
}>();

function setStatus(value: unknown) {
  if (value === '' || value === 'enabled' || value === 'disabled') {
    emit('setStatus', value);
    return;
  }
  emit('setStatus', '');
}
</script>

<template>
  <div class="mpm-toolbar">
    <Select
      class="mpm-filter-select"
      :value="filters.status"
      :options="POINTS_MALL_PRODUCT_STATUS_FILTER_OPTIONS"
      :disabled="loading"
      @update:value="setStatus"
    />

    <Input
      class="mpm-search-input"
      :value="filters.keyword"
      :disabled="loading"
      placeholder="搜索兑换商品"
      allow-clear
      @update:value="(value) => emit('setKeyword', String(value ?? ''))"
      @press-enter="emit('search')"
    />

    <Button :disabled="loading" @click="emit('search')">搜索</Button>
    <Button :disabled="loading" @click="emit('reset')">重置</Button>

    <span class="mpm-spacer"></span>
    <Button
      type="primary"
      :disabled="!canManage || loading"
      @click="emit('create')"
    >
      添加兑换商品
    </Button>
  </div>
</template>
