import {
  DataGrid as MuiDataGrid,
  DataGridProps as MuiDataGridProps
} from "@mui/x-data-grid";
import React from "react";
import "./table.scss";

export interface DataGridProps extends MuiDataGridProps { }

export const Table = ({ ...rest }: DataGridProps) => {

  const [columns, setColumns] = React.useState(rest.columns);

  const handleDragStart = (e: any, field: any) => {
    e.dataTransfer.setData('text/plain', field);
  };

  const handleDragOver = (e: any, targetField: any) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';

  };

  const handleDrop = (e: any, targetField: any) => {
    e.preventDefault();

    const draggedField = e.dataTransfer.getData('text/plain');
    const newColumns = columns.slice();
    const draggedColumn = newColumns.find((col) => col.field === draggedField);

    if (draggedColumn) {
      const targetIndex = newColumns.findIndex((col) => col.field === targetField);
      newColumns.splice(newColumns.indexOf(draggedColumn), 1);
      newColumns.splice(targetIndex, 0, draggedColumn);
      setColumns(newColumns);
    }
  };

  return (
    <div className="table-container">
      <MuiDataGrid
        {...rest}

        columns={columns.map((col, index) => ({
          ...col,
          renderHeader: () => (
            <div className="header-title" style={{ minWidth: col.width }}
              draggable
              onDragStart={(e) => handleDragStart(e, col.field)}
              onDragOver={(e) => handleDragOver(e, col.field)}
              onDrop={(e) => handleDrop(e, col.field)}

            >{col.headerName}
            </div>
          ),
        }))}

        columnHeaderHeight={32}
        rowHeight={40}
        showColumnVerticalBorder
        hideFooterPagination
        disableDensitySelector
        disableColumnSelector
        disableRowSelectionOnClick

      ></MuiDataGrid>
    </div>
  );
};