import React = require('react');
import { observer } from 'mobx-react';
import './CollectionSchemaView.scss';
import { EditableView } from '../../EditableView';
import { emptyFunction } from '../../../../Utils';
import { action, computed } from 'mobx';

export interface SchemaColumnHeaderProps {
    columnKeys: string[];
    columnWidths: number[];
    columnIndex: number;
    changeColumnKey: (index: number, newKey: string) => boolean;
}

@observer
export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> {
    @computed get fieldKey() {
        return this.props.columnKeys[this.props.columnIndex];
    }

    render() {
        return (
            <div className="schema-column-header" style={{ width: this.props.columnWidths[this.props.columnIndex] }}>
                <EditableView SetValue={(newKey: string) => this.props.changeColumnKey(this.props.columnIndex, newKey)} GetValue={() => this.fieldKey} contents={this.fieldKey} />
            </div>
        );
    }
}