import React = require('react');
import { observer } from 'mobx-react';
import { Doc, Field } from '../../../../fields/Doc';
import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero } from '../../../../Utils';
import { Transform } from '../../../util/Transform';
import { EditableView } from '../../EditableView';
import { FieldView, FieldViewProps } from '../../nodes/FieldView';
import { KeyValueBox } from '../../nodes/KeyValueBox';
import { DefaultStyleProvider } from '../../StyleProvider';
import { CollectionSchemaView } from './CollectionSchemaView';
import './CollectionSchemaView.scss';

export interface SchemaTableCellProps {
    Document: Doc;
    fieldKey: string;
    columnWidth: number;
    isRowActive: () => boolean | undefined;
    setColumnValues: (field: string, value: string) => boolean;
}

@observer
export class SchemaTableCell extends React.Component<SchemaTableCellProps> {
    render() {
        const props: FieldViewProps = {
            Document: this.props.Document,
            docFilters: returnEmptyFilter,
            docRangeFilters: returnEmptyFilter,
            searchFilterDocs: returnEmptyDoclist,
            styleProvider: DefaultStyleProvider,
            docViewPath: returnEmptyDoclist,
            ContainingCollectionView: undefined,
            ContainingCollectionDoc: undefined,
            fieldKey: this.props.fieldKey,
            rootSelected: returnFalse,
            isSelected: returnFalse,
            setHeight: returnFalse,
            select: emptyFunction,
            dropAction: 'alias',
            bringToFront: emptyFunction,
            renderDepth: 1,
            isContentActive: returnFalse,
            whenChildContentsActiveChanged: emptyFunction,
            ScreenToLocalTransform: Transform.Identity,
            focus: emptyFunction,
            PanelWidth: () => this.props.columnWidth,
            PanelHeight: () => CollectionSchemaView._rowHeight,
            addDocTab: returnFalse,
            pinToPres: returnZero,
        };

        return (
            <div className="schema-table-cell" style={{ width: this.props.columnWidth }}>
                <div className="schemacell-edit-wrapper" style={this.props.isRowActive() ? { cursor: 'text', pointerEvents: 'auto' } : { cursor: 'default', pointerEvents: 'none' }}>
                    <EditableView
                        contents={<FieldView {...props} />}
                        GetValue={() => Field.toKeyValueString(this.props.Document, this.props.fieldKey)}
                        SetValue={(value: string, shiftDown?: boolean, enterKey?: boolean) => {
                            if (shiftDown && enterKey) {
                                this.props.setColumnValues(this.props.fieldKey, value);
                            }
                            return KeyValueBox.SetField(this.props.Document, this.props.fieldKey, value);
                        }}
                        editing={this.props.isRowActive() ? undefined : false}
                    />
                </div>
            </div>
        );
    }
}