import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { Cell, flexRender } from "@tanstack/react-table";
import { align } from "../../types/common";
import { getColumnPinningStylesBody } from "../../libs/utils/common";
import {
  CraftTableFeatureProps,
  CraftTableOptionsProps,
} from "../../types/table-options";
import { TableBodyCell } from "./table-body.styles";

interface DragAlongCellProps<T> {
  cell: Cell<T, unknown>;
  featureOptions: CraftTableFeatureProps;
  tableStates: CraftTableOptionsProps;
}

function DragAlongCell<T>({
  cell,
  // featureOptions,
  tableStates,
}: DragAlongCellProps<T>) {
  const { isDragging, setNodeRef, transform } = useSortable({
    id: cell.column.id,
  });
  // const { enableWordBreakAll } = featureOptions;
  const { wrapColumns } = tableStates;

  const isPinned = cell.column.getIsPinned();

  return (
    <TableBodyCell
      ref={setNodeRef}
      align={(cell.column.columnDef.meta as align)?.align || "left"}
      style={{
        opacity: isDragging ? 0.8 : 1,
        transform: CSS.Translate.toString(transform),
        transition: "width transform 0.2s ease-in-out",
        width: cell.column.getSize(),
        ...getColumnPinningStylesBody(cell.column),
        ...((wrapColumns.all_wrap || wrapColumns[cell.column.id]) && {
          wordBreak: "break-all",
          whiteSpace: "normal",
        }),
        zIndex: isPinned ? 2 : isDragging ? 1 : 0,
      }}
      className="table-row-cell"
    >
      {cell.getIsPlaceholder()
        ? null
        : flexRender(cell.column.columnDef.cell, cell.getContext())}
    </TableBodyCell>
  );
}

export default DragAlongCell;