<script setup lang="ts">
import type { Table } from '@tanstack/vue-table'

import { X } from 'lucide-vue-next'
import { computed } from 'vue'

import type { CombinedItem } from '@/pages/admin/agent-apps/data/schema'

import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'

interface DataTableToolbarProps {
  table: Table<CombinedItem>
}

const props = defineProps<DataTableToolbarProps>()

const isFiltered = computed(() => props.table.getState().columnFilters.length > 0)
</script>

<template>
  <div class="flex items-center flex-1 space-x-2">
    <Input
      placeholder="搜索代理商/管理员..."
      :model-value="(table.getColumn('agent_name')?.getFilterValue() as string) ?? ''"
      class="h-8 w-[150px] lg:w-[200px]"
      @input="table.getColumn('agent_name')?.setFilterValue($event.target.value)"
    />

    <Button
      v-if="isFiltered"
      variant="ghost"
      class="h-8 px-2 lg:px-3"
      @click="table.resetColumnFilters()"
    >
      重置
      <X class="size-4 ml-2" />
    </Button>
  </div>
</template>
