"use client"

import { Row, Table } from "@tanstack/react-table";


import { DataTableRowOps } from '@repo/rdx-ui/components';
import {
  Button,
  Tooltip,
  TooltipContent,
  TooltipTrigger
} from '@repo/shadcn-ui/components';
import { ArrowDownIcon, ArrowUpIcon, CopyIcon, PencilIcon, Trash2Icon } from 'lucide-react';

interface DataTableRowActionsProps<TData> {
  row: Row<TData>,
  table: Table<TData>
}

export function ItemDataTableRowActions<TData>({
  row, table
}: DataTableRowActionsProps<TData>) {
  const ops = (table.options.meta as any)?.rowOps as DataTableRowOps<TData>;
  const openEditor = (table.options.meta as any)?.openEditor as (i: number, table: Table<TData>) => void;
  const lastRow = table.getRowModel().rows.length - 1;
  const rowIndex = row.index;

  return (
    <div className="items-center gap-1 inline-flex">
      <Tooltip>
        <TooltipTrigger asChild>
          {openEditor && (
            <Button
              type='button'
              className='cursor-pointer'
              variant='ghost'
              size='icon-sm'
              aria-label='Edit row'
              onClick={() => openEditor?.(rowIndex, table)}
            >
              <PencilIcon className='size-4 text-muted-foreground' />
            </Button>
          )}
        </TooltipTrigger>
        <TooltipContent>Edit</TooltipContent>
      </Tooltip>
      <Tooltip>
        <TooltipTrigger asChild>
          {ops?.duplicate && (
            <Button
              type='button'
              className='cursor-pointer'
              variant='ghost'
              size='icon-sm'
              aria-label='Duplicate row'
              onClick={() => ops?.duplicate?.(rowIndex, table)}
            >
              <CopyIcon className='size-4 text-muted-foreground' />
            </Button>
          )}
        </TooltipTrigger>
        <TooltipContent>Copy</TooltipContent>
      </Tooltip>
      <Tooltip>
        <TooltipTrigger asChild>
          {ops?.move && (
            <Button
              type='button'
              className='cursor-pointer'
              variant='ghost'
              size='icon-sm'
              aria-label='Move up'
              disabled={ops?.canMoveUp ? !ops.canMoveUp(rowIndex, table) : rowIndex === 0}
              onClick={() => ops?.move?.(rowIndex, rowIndex - 1, table)}
            >
              <ArrowUpIcon className='size-4 text-muted-foreground hover:cursor-pointer' />
            </Button>
          )}
        </TooltipTrigger>
        <TooltipContent>Up</TooltipContent>
      </Tooltip>
      <Tooltip>
        <TooltipTrigger asChild>
          {ops?.move && <Button
            type='button'
            className='cursor-pointer'
            variant='ghost'
            size='icon-sm'
            aria-label='Move down'
            disabled={ops?.canMoveDown ? !ops.canMoveDown(rowIndex, lastRow, table) : rowIndex === lastRow}
            onClick={() => ops?.move?.(rowIndex, rowIndex + 1, table)}
          >
            <ArrowDownIcon className='size-4 text-muted-foreground hover:cursor-pointer' />
          </Button>}
        </TooltipTrigger>
        <TooltipContent>Down</TooltipContent>
      </Tooltip>
      <Tooltip>
        <TooltipTrigger asChild>
          {ops?.remove && (
            <Button
              className='cursor-pointer'
              type='button'
              variant='ghost'
              size='icon-sm'
              aria-label='Delete row'
              onClick={() => ops?.remove?.(rowIndex, table)}
            >
              <Trash2Icon className='size-4 text-muted-foreground hover:cursor-pointer' />
            </Button>
          )}
        </TooltipTrigger>
        <TooltipContent>Delete</TooltipContent>
      </Tooltip>
    </div>
  );
}
