import React = require('react');
import { observer } from 'mobx-react';
import { Doc, DocListCast, Field } from '../../../../fields/Doc';
import './CollectionSchemaView.scss';
import { type } from 'jquery';
import { action } from 'mobx';
import { ComputedField } from '../../../../fields/ScriptField';
import { FieldValue } from '../../../../fields/Types';
import { CompileScript } from '../../../util/Scripting';
import { EditableView } from '../../EditableView';
import { MAX_ROW_HEIGHT } from '../../global/globalCssVariables.scss';

export interface SchemaTableCellProps {
    Document: Doc;
    fieldKey: string;
    columnWidth: number;
}

@observer
export class SchemaTableCell extends React.Component<SchemaTableCellProps> {
    render() {
        return (
            <div className="schema-table-cell" style={{ width: this.props.columnWidth }}>
                {Field.toString(this.props.Document[this.props.fieldKey] as Field)}
                {/* <EditableView contents={Field.toString(this.props.Document[this.props.fieldKey] as Field)} GetValue={() => Field.toKeyValueString(this.props.Document, this.props.fieldKey)} SetValue={(value: string) => true} /> */}
            </div>
        );
    }
}