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

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

import type { Session } from '@/pages/admin/sessions/data/schema'

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

interface DataTableToolbarProps {
  table: Table<Session>
  searchFilter?: string
}

const props = defineProps<DataTableToolbarProps>()
const emit = defineEmits<{
  'update:searchFilter': [value: string]
  'refresh': []
}>()

const isFiltered = computed(() => !!props.searchFilter)

function resetFilters() {
  emit('update:searchFilter', '')
}
</script>

<template>
  <div class="flex items-center flex-1 space-x-2">
    <Input
      :model-value="searchFilter"
      placeholder="搜索实例标识、设备指纹、用户名..."
      class="h-8 w-[200px] lg:w-[300px]"
      @update:model-value="emit('update:searchFilter', $event as string)"
    />

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

  <Button
    variant="outline"
    size="sm"
    class="h-8"
    @click="emit('refresh')"
  >
    <RefreshCw class="mr-2 h-4 w-4" />
    刷新
  </Button>
</template>
