import type { ReactNode } from 'react'

import type { Table } from '@tanstack/react-table'
import { RefreshCcw } from 'lucide-react'

import { DataTableViewOptions } from '@/components/data-table/view-options.tsx'
import { Button } from '@/components/ui/button.tsx'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip.tsx'

type DataTableToolbarProps<TData> = {
  table: Table<TData>
  toolbarLeft?: ReactNode
  toolbarRight?: ReactNode
}

export function DataTableToolbar<TData>({
  table,
  toolbarLeft,
  toolbarRight,
}: DataTableToolbarProps<TData>) {
  const refetch = table.options.meta?.refetch
  const isFetching = table.options.meta?.isFetching

  return (
    <div className='flex mb-4 items-center'>
      <div className='flex-1 flex items-center'>{toolbarLeft}</div>
      <div className='flex gap-2 items-center'>
        {toolbarRight}

        <div className='flex items-center'>
          {refetch && (
            <Tooltip>
              <TooltipTrigger asChild>
                <span className='inline-flex'>
                  <Button
                    disabled={isFetching}
                    variant='ghost'
                    size='icon'
                    className='cursor-pointer'
                    onClick={() => refetch()}
                  >
                    <RefreshCcw />
                  </Button>
                </span>
              </TooltipTrigger>
              <TooltipContent>刷新表格</TooltipContent>
            </Tooltip>
          )}

          <DataTableViewOptions table={table} />
        </div>
      </div>
    </div>
  )
}