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

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

import {
  POINTS_MALL_RECORD_REDEEM_FILTER_OPTIONS,
  POINTS_MALL_RECORD_STATUS_FILTER_OPTIONS,
} from '../composables/points-mall-page/constants';

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

const emit = defineEmits<{
  (event: 'export'): void;
  (event: 'reset'): void;
  (event: 'search'): void;
  (event: 'setKeyword', value: string): void;
  (event: 'setRedeemType', value: '' | 'coupon' | 'physical' | 'product'): void;
  (
    event: 'setStatus',
    value: '' | 'canceled' | 'completed' | 'issued' | 'pending_pickup',
  ): void;
}>();

function setRedeemType(value: unknown) {
  if (
    value === '' ||
    value === 'product' ||
    value === 'coupon' ||
    value === 'physical'
  ) {
    emit('setRedeemType', value);
    return;
  }
  emit('setRedeemType', '');
}

function setStatus(value: unknown) {
  if (
    value === '' ||
    value === 'pending_pickup' ||
    value === 'issued' ||
    value === 'completed' ||
    value === 'canceled'
  ) {
    emit('setStatus', value);
    return;
  }
  emit('setStatus', '');
}
</script>

<template>
  <div class="mpm-toolbar">
    <Select
      class="mpm-filter-select"
      :value="filters.redeemType"
      :disabled="loading"
      :options="POINTS_MALL_RECORD_REDEEM_FILTER_OPTIONS"
      @update:value="setRedeemType"
    />

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

    <Input
      class="mpm-search-input"
      :value="filters.keyword"
      :disabled="loading"
      allow-clear
      placeholder="搜索会员/商品名称"
      @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
      :loading="exporting"
      :disabled="!canManage || loading"
      @click="emit('export')"
    >
      导出
    </Button>
  </div>
</template>
