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

import { XIcon } from 'lucide-vue-next'

import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { cn } from '@/lib/utils'

interface BulkActionsProps<T> {
  table: VueTable<T>
  entityName?: string
}

const { table, entityName: _entityName } = defineProps<BulkActionsProps<T>>()

const selectedRows = computed(() => table.getSelectedRowModel().rows)
const selectedCount = computed(() => selectedRows.value.length || 0)

function handleClearSelection() {
  table.resetRowSelection()
}
</script>

<template>
  <TooltipProvider>
    <Transition
      enter-active-class="transition-all duration-200 ease-out"
      leave-active-class="transition-all duration-200 ease-in"
      enter-from-class="opacity-0 -translate-y-2"
      leave-to-class="opacity-0 -translate-y-2"
    >
      <div
        v-if="selectedCount"
        :class="cn(
          'mb-4 p-3 rounded-lg border',
          'bg-muted/50',
          'flex flex-wrap items-center gap-2',
        )"
      >
        <div class="flex items-center gap-2">
          <Tooltip>
            <TooltipTrigger as-child>
              <Button
                variant="ghost"
                size="icon"
                class="size-7"
                aria-label="Clear selection"
                @click="handleClearSelection"
              >
                <XIcon class="size-4" />
                <span class="sr-only">Clear selection</span>
              </Button>
            </TooltipTrigger>
            <TooltipContent>
              <p>取消选择</p>
            </TooltipContent>
          </Tooltip>

          <Separator
            class="h-5"
            orientation="vertical"
            aria-hidden="true"
          />

          <div class="flex items-center gap-1 text-sm">
            <UiBadge
              class="min-w-8 rounded-lg"
              :aria-label="`${selectedCount} selected`"
            >
              {{ selectedCount }}
            </UiBadge>
            <span>项已选中</span>
          </div>
        </div>

        <Separator
          class="h-5 hidden sm:block"
          orientation="vertical"
          aria-hidden="true"
        />

        <div class="flex flex-wrap items-center gap-2">
          <slot />
        </div>
      </div>
    </Transition>
  </TooltipProvider>
</template>
