import React from "react";
import {
  ColumnOrderState,
  flexRender,
  Row,
  Table,
} from "@tanstack/react-table";
import {
  CraftTableFeatureProps,
  CraftTableOptionsProps,
} from "../types/table-options";
import { align } from "../types/common";
import DragAlongCell from "./table-body-dnd-cell";
import {
  horizontalListSortingStrategy,
  SortableContext,
} from "@dnd-kit/sortable";
import { getColumnPinningStylesBody } from "../libs/utils/common";
import Checkbox from "./inputs/checkbox";

interface TableBodyProps<T> {
  table: Table<T>;
  featureOptions: CraftTableFeatureProps;
  NestedComponent?: React.ComponentType<{ row: Row<T> }>;
  columnOrder: ColumnOrderState;
  tableStates: CraftTableOptionsProps;
}

function TableBody<T>({
  table,
  featureOptions,
  NestedComponent,
  columnOrder,
  tableStates,
}: TableBodyProps<T>) {
  const { enableColumnReordering, enableRowSelection } = featureOptions;

  const { wrapColumns } = tableStates;

  const renderRow = (row: Row<T>) => {
    const renderedRow = (
      <tr key={row.id} className="ts__body__tr">
        {enableRowSelection && (
          <td
            className="ts__body__td ts__body__checkbox"
            style={{
              position: "sticky",
              left: 0,
              width: "50px",
            }}
          >
            <Checkbox
              checked={row.getIsSelected()}
              indeterminate={row.getIsSomeSelected()}
              onChange={row.getToggleSelectedHandler()}
              className="checkbox__input"
            />
          </td>
        )}

        {row?.getVisibleCells()?.map((cell) => {
          const tdProps = {
            className: "ts__body__td",
            style: {
              ...getColumnPinningStylesBody(cell.column),
              width: cell.column.getSize(),
              ...((wrapColumns.all_wrap || wrapColumns[cell.column.id]) && {
                wordBreak: "break-all",
                // whiteSpace: "normal",
              }),
            } as React.CSSProperties,
            align: (cell.column.columnDef.meta as align)?.align || "left",
          };

          return enableColumnReordering ? (
            <SortableContext
              key={cell.id}
              items={columnOrder}
              strategy={horizontalListSortingStrategy}
            >
              <DragAlongCell
                cell={cell}
                featureOptions={featureOptions}
                tableStates={tableStates}
              />
            </SortableContext>
          ) : (
            <td key={cell?.id} {...tdProps}>
              {flexRender(cell?.column?.columnDef?.cell, cell?.getContext())}
            </td>
          );
        })}
      </tr>
    );

    if (row.getIsExpanded()) {
      return (
        <React.Fragment key={row.id}>
          {renderedRow}
          {NestedComponent && (
            <tr>
              {/* <td colSpan={table.getAllLeafColumns().length}>//commented out to remove extra line on opening of 
              {NestedComponent && <NestedComponent {...{ row }} />}
            </td> */}
              {<NestedComponent {...{ row }} />}
            </tr>
          )}
        </React.Fragment>
      );
    } else {
      return renderedRow;
    }
  };

  return (
    <tbody className="ts__body">
      {table?.getRowModel()?.rows?.map((row) => renderRow(row))}
    </tbody>
  );
}

export default TableBody;