import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { emptyFunction, setupMoveUpEvents } from '../../../../Utils';
import { Colors } from '../../global/globalEnums';
import './CollectionSchemaView.scss';

export interface SchemaColumnHeaderProps {
    columnKeys: string[];
    columnWidths: number[];
    columnIndex: number;
    sortField: string;
    sortDesc: boolean;
    isContentActive: (outsideReaction?: boolean | undefined) => boolean | undefined;
    setSort: (field: string | undefined, desc?: boolean) => void;
    removeColumn: (index: number) => void;
    rowHeight: () => number;
    resizeColumn: (e: any, index: number) => void;
    dragColumn: (e: any, index: number) => boolean;
    openContextMenu: (x: number, y: number, index: number) => void;
    setColRef: (index: number, ref: HTMLDivElement) => void;
}

@observer
export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps> {
    @observable _ref: HTMLDivElement | null = null;

    get fieldKey() {
        return this.props.columnKeys[this.props.columnIndex];
    }

    @action
    sortClicked = (e: React.PointerEvent) => {
        e.stopPropagation();
        e.preventDefault();
        if (this.props.sortField == this.fieldKey && this.props.sortDesc) {
            this.props.setSort(undefined);
        } else if (this.props.sortField == this.fieldKey) {
            this.props.setSort(this.fieldKey, true);
        } else {
            this.props.setSort(this.fieldKey, false);
        }
    };

    @action
    onPointerDown = (e: React.PointerEvent) => {
        this.props.isContentActive(true) && setupMoveUpEvents(this, e, e => this.props.dragColumn(e, this.props.columnIndex), emptyFunction, emptyFunction, false);
    };

    render() {
        return (
            <div
                className="schema-column-header"
                style={{
                    width: this.props.columnWidths[this.props.columnIndex],
                }}
                onPointerDown={this.onPointerDown}
                ref={col => {
                    if (col) {
                        this._ref = col;
                        this.props.setColRef(this.props.columnIndex, col);
                    }
                }}>
                <div className="schema-column-resizer left" onPointerDown={e => this.props.resizeColumn(e, this.props.columnIndex)}></div>
                <div className="schema-column-title">{this.fieldKey}</div>

                <div className="schema-header-menu">
                    <div className="schema-header-button" onPointerDown={e => this.props.openContextMenu(e.clientX, e.clientY, this.props.columnIndex)}>
                        <FontAwesomeIcon icon="ellipsis-h" />
                    </div>
                    <div className="schema-sort-button" onPointerDown={this.sortClicked} style={this.props.sortField == this.fieldKey ? { backgroundColor: Colors.MEDIUM_BLUE } : {}}>
                        <FontAwesomeIcon icon="caret-right" style={this.props.sortField == this.fieldKey ? { transform: `rotate(${this.props.sortDesc ? '270deg' : '90deg'})` } : {}} />
                    </div>
                </div>
            </div>
        );
    }
}