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

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();

  const style: CSSProperties = {
    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",
    }),
  };

  return (
    <td
      ref={setNodeRef}
      {...{
        style: {
          ...style,
          zIndex: isPinned ? 2 : isDragging ? 1 : 0,
        },
        align: (cell.column.columnDef.meta as align)?.align || "left",
        className: "ts__body__td",
      }}
    >
      {cell.getIsPlaceholder()
        ? null
        : flexRender(cell.column.columnDef.cell, cell.getContext())}
    </td>
  );
}

export default DragAlongCell;