import React = require('react');
import { computed } from 'mobx';
import { observer } from 'mobx-react';
import { EditableView } from '../../EditableView';
import './CollectionSchemaView.scss';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

export interface SchemaColumnHeaderProps {
    columnKeys: string[];
    columnWidths: number[];
    columnIndex: number;
    changeColumnKey: (index: number, newKey: string) => boolean;
    addColumn: (index: number) => void;
    removeColumn: (index: number) => void;
    resizeColumn: (e: any, index: number, left: boolean) => void;
}

@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] }}>
                <div className="schema-column-resizer left" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex, true)}></div>
                <div className="schema-column-title">
                    <EditableView SetValue={(newKey: string) => this.props.changeColumnKey(this.props.columnIndex, newKey)} GetValue={() => this.fieldKey} contents={this.fieldKey} />
                </div>

                <div className="schema-header-menu">
                    <div
                        className="schema-header-button"
                        onPointerDown={e => {
                            this.props.addColumn(this.props.columnIndex + 1);
                        }}>
                        <FontAwesomeIcon icon="plus" />
                    </div>
                    <div
                        className="schema-header-button"
                        onPointerDown={e => {
                            this.props.removeColumn(this.props.columnIndex);
                        }}>
                        <FontAwesomeIcon icon="trash" />
                    </div>
                </div>

                <div className="schema-column-resizer right" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex, false)}></div>
            </div>
        );
    }
}