import React = require('react');
import { observer } from 'mobx-react';
import './CollectionSchemaView.scss';
import { ViewBoxAnnotatableComponent, ViewBoxBaseComponent } from '../../DocComponent';
import { FieldViewProps } from '../../nodes/FieldView';
import { SchemaTableCell } from './SchemaTableCell';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { undoBatch } from '../../../util/UndoManager';

export interface SchemaRowBoxProps extends FieldViewProps {
    columnKeys: string[];
    columnWidths: number[];
}

@observer
export class SchemaRowBox extends ViewBoxAnnotatableComponent<SchemaRowBoxProps>() {
    render() {
        return (
            <div className="schema-row" /*style={this.props.isSelected() ? { backgroundColor: 'grey' } : {}}*/>
                <div className="row-menu">
                    <div className="row-button" onPointerDown={undoBatch(() => this.props.removeDocument?.(this.props.Document))}>
                        <FontAwesomeIcon icon={'times'} />
                    </div>
                </div>
                <div className="row-cells">
                    {this.props.columnKeys.map((key, index) => (
                        <SchemaTableCell Document={this.props.Document} key={key} fieldKey={key} columnWidth={this.props.columnWidths[index]} />
                    ))}
                </div>
            </div>
        );
    }
}