// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
// import { action } from 'mobx';
// import * as React from 'react';
// import { ReactTableDefaults, RowInfo } from 'react-table';
// import { Doc } from '../../../../fields/Doc';
// import { Cast, FieldValue, StrCast } from '../../../../fields/Types';
// import { DocumentManager } from '../../../util/DocumentManager';
// import { DragManager, dropActionType, SetupDrag } from '../../../util/DragManager';
// import { SnappingManager } from '../../../util/SnappingManager';
// import { Transform } from '../../../util/Transform';
// import { undoBatch } from '../../../util/UndoManager';
// import { ContextMenu } from '../../ContextMenu';
// import { OpenWhere } from '../../nodes/DocumentView';
// import './CollectionSchemaView.scss';

// export interface MovableRowProps {
//     rowInfo: RowInfo;
//     ScreenToLocalTransform: () => Transform;
//     addDoc: (doc: Doc | Doc[], relativeTo?: Doc, before?: boolean) => boolean;
//     removeDoc: (doc: Doc | Doc[]) => boolean;
//     rowFocused: boolean;
//     textWrapRow: (doc: Doc) => void;
//     rowWrapped: boolean;
//     dropAction: string;
//     addDocTab: any;
// }

// export class MovableRow extends React.Component<React.PropsWithChildren<MovableRowProps>> {
//     private _header?: React.RefObject<HTMLDivElement> = React.createRef();
//     private _rowDropDisposer?: DragManager.DragDropDisposer;

//     // Event listeners are only necessary when the user is hovering over the table
//     // Create one when the mouse starts hovering...
//     onPointerEnter = (e: React.PointerEvent): void => {
//         if (e.buttons === 1 && SnappingManager.GetIsDragging()) {
//             this._header!.current!.className = 'collectionSchema-row-wrapper';
//             document.addEventListener('pointermove', this.onDragMove, true);
//         }
//     };
//     // ... and delete it when the mouse leaves
//     onPointerLeave = (e: React.PointerEvent): void => {
//         this._header!.current!.className = 'collectionSchema-row-wrapper';
//         document.removeEventListener('pointermove', this.onDragMove, true);
//     };
//     // The method for the event listener, reorders columns when dragged to their new locations.
//     onDragMove = (e: PointerEvent): void => {
//         const x = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY);
//         const rect = this._header!.current!.getBoundingClientRect();
//         const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left, rect.top + rect.height / 2);
//         const before = x[1] < bounds[1];
//         this._header!.current!.className = 'collectionSchema-row-wrapper';
//         if (before) this._header!.current!.className += ' row-above';
//         if (!before) this._header!.current!.className += ' row-below';
//         e.stopPropagation();
//     };
//     componentWillUnmount() {
//         this._rowDropDisposer?.();
//     }
//     //
//     createRowDropTarget = (ele: HTMLDivElement) => {
//         this._rowDropDisposer?.();
//         if (ele) {
//             this._rowDropDisposer = DragManager.MakeDropTarget(ele, this.rowDrop.bind(this));
//         }
//     };
//     // Controls what hppens when a row is dragged and dropped
//     rowDrop = (e: Event, de: DragManager.DropEvent) => {
//         this.onPointerLeave(e as any);
//         const rowDoc = FieldValue(Cast(this.props.rowInfo.original, Doc));
//         if (!rowDoc) return false;

//         const x = this.props.ScreenToLocalTransform().transformPoint(de.x, de.y);
//         const rect = this._header!.current!.getBoundingClientRect();
//         const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left, rect.top + rect.height / 2);
//         const before = x[1] < bounds[1];

//         const docDragData = de.complete.docDragData;
//         if (docDragData) {
//             e.stopPropagation();
//             if (docDragData.draggedDocuments[0] === rowDoc) return true;
//             const addDocument = (doc: Doc | Doc[]) => this.props.addDoc(doc, rowDoc, before);
//             const movedDocs = docDragData.draggedDocuments;
//             return docDragData.dropAction || docDragData.userDropAction
//                 ? docDragData.droppedDocuments.reduce((added: boolean, d) => this.props.addDoc(d, rowDoc, before) || added, false)
//                 : docDragData.moveDocument
//                 ? movedDocs.reduce((added: boolean, d) => docDragData.moveDocument?.(d, rowDoc, addDocument) || added, false)
//                 : docDragData.droppedDocuments.reduce((added: boolean, d) => this.props.addDoc(d, rowDoc, before), false);
//         }
//         return false;
//     };

//     onRowContextMenu = (e: React.MouseEvent): void => {
//         const description = this.props.rowWrapped ? 'Unwrap text on row' : 'Text wrap row';
//         ContextMenu.Instance.addItem({ description: description, event: () => this.props.textWrapRow(this.props.rowInfo.original), icon: 'file-pdf' });
//     };

//     @undoBatch
//     @action
//     move: DragManager.MoveFunction = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDoc) => {
//         const targetView = targetCollection && DocumentManager.Instance.getDocumentView(targetCollection);
//         return doc !== targetCollection && doc !== targetView?.props.ContainingCollectionDoc && this.props.removeDoc(doc) && addDoc(doc);
//     };

//     @action
//     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
//         console.log('yes');
//         if (e.key === 'Backspace' || e.key === 'Delete') {
//             undoBatch(() => this.props.removeDoc(this.props.rowInfo.original));
//         }
//     };

//     render() {
//         const { children = null, rowInfo } = this.props;

//         if (!rowInfo) {
//             return <ReactTableDefaults.TrComponent>{children}</ReactTableDefaults.TrComponent>;
//         }

//         const { original } = rowInfo;
//         const doc = FieldValue(Cast(original, Doc));

//         if (!doc) return null;

//         const reference = React.createRef<HTMLDivElement>();
//         const onItemDown = SetupDrag(reference, () => doc, this.move, StrCast(this.props.dropAction) as dropActionType);

//         let className = 'collectionSchema-row';
//         if (this.props.rowFocused) className += ' row-focused';
//         if (this.props.rowWrapped) className += ' row-wrapped';

//         return (
//             <div className={className} onKeyPress={this.onKeyDown} ref={this.createRowDropTarget} onContextMenu={this.onRowContextMenu}>
//                 <div className="collectionSchema-row-wrapper" onKeyPress={this.onKeyDown} ref={this._header} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
//                     <ReactTableDefaults.TrComponent onKeyPress={this.onKeyDown}>
//                         <div className="row-dragger">
//                             <div className="row-option" onClick={undoBatch(() => this.props.removeDoc(this.props.rowInfo.original))}>
//                                 <FontAwesomeIcon icon="trash" size="sm" />
//                             </div>
//                             <div className="row-option" style={{ cursor: 'grab' }} ref={reference} onPointerDown={onItemDown}>
//                                 <FontAwesomeIcon icon="grip-vertical" size="sm" />
//                             </div>
//                             <div className="row-option" onClick={() => this.props.addDocTab(this.props.rowInfo.original, OpenWhere.addRight)}>
//                                 <FontAwesomeIcon icon="external-link-alt" size="sm" />
//                             </div>
//                         </div>
//                         {children}
//                     </ReactTableDefaults.TrComponent>
//                 </div>
//             </div>
//         );
//     }
// }