<script setup lang="ts">
import { IconifyIcon } from '@vben/icons';

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

import {
  CUSTOMER_ORDER_COUNT_OPTIONS,
  CUSTOMER_REGISTER_PERIOD_OPTIONS,
  CUSTOMER_TAG_OPTIONS,
} from '../composables/customer-list-page/constants';

interface OptionItem {
  label: string;
  value: string;
}

interface FilterState {
  keyword: string;
  orderCountRange: string;
  registerPeriod: string;
  tag: string;
}

interface Props {
  filters: FilterState;
  isExporting: boolean;
  isStoreLoading: boolean;
  selectedStoreId: string;
  showExport: boolean;
  storeOptions: OptionItem[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'export'): void;
  (event: 'reset'): void;
  (event: 'search'): void;
  (event: 'update:keyword', value: string): void;
  (event: 'update:orderCountRange', value: string): void;
  (event: 'update:registerPeriod', value: string): void;
  (event: 'update:selectedStoreId', value: string): void;
  (event: 'update:tag', value: string): void;
}>();

function handleStoreChange(value: unknown) {
  if (typeof value === 'number' || typeof value === 'string') {
    emit('update:selectedStoreId', String(value));
    return;
  }

  emit('update:selectedStoreId', '');
}
</script>

<template>
  <div class="cl-toolbar">
    <Select
      class="cl-store-select"
      :value="props.selectedStoreId"
      placeholder="全部门店"
      :loading="props.isStoreLoading"
      :options="props.storeOptions"
      :disabled="props.isStoreLoading || props.storeOptions.length === 0"
      @update:value="(value) => handleStoreChange(value)"
    />

    <Select
      class="cl-tag-select"
      :value="props.filters.tag"
      :options="CUSTOMER_TAG_OPTIONS"
      @update:value="(value) => emit('update:tag', String(value ?? 'all'))"
    />

    <Select
      class="cl-order-count-select"
      :value="props.filters.orderCountRange"
      :options="CUSTOMER_ORDER_COUNT_OPTIONS"
      @update:value="
        (value) => emit('update:orderCountRange', String(value ?? 'all'))
      "
    />

    <Select
      class="cl-register-period-select"
      :value="props.filters.registerPeriod"
      :options="CUSTOMER_REGISTER_PERIOD_OPTIONS"
      @update:value="
        (value) => emit('update:registerPeriod', String(value ?? 'all'))
      "
    />

    <Input
      class="cl-search-input"
      :value="props.filters.keyword"
      placeholder="搜索客户姓名 / 手机号"
      allow-clear
      @update:value="(value) => emit('update:keyword', String(value ?? ''))"
      @press-enter="emit('search')"
    >
      <template #prefix>
        <IconifyIcon icon="lucide:search" class="cl-search-icon" />
      </template>
    </Input>

    <Button class="cl-query-btn" type="primary" @click="emit('search')">
      查询
    </Button>
    <Button class="cl-reset-btn" @click="emit('reset')">重置</Button>

    <div class="cl-toolbar-right">
      <Button
        v-if="props.showExport"
        class="cl-export-btn"
        :loading="props.isExporting"
        @click="emit('export')"
      >
        <template #icon>
          <IconifyIcon icon="lucide:download" />
        </template>
        导出
      </Button>
    </div>
  </div>
</template>
