import * as React from "react";

import { ContextMenu, Item, Separator, menuProvider, ContextMenuProvider } from "react-contexify";

export class GridContextMenu extends React.Component<any, any> {

    constructor(props) {
        super(props);

        this.onSort = this.onSort.bind(this);
        this.onUnsort = this.onUnsort.bind(this);
    }

    onSort() {
        if (this.props.onSort) {
            this.props.onSort(this.props.column);
        }
    }

    onUnsort() {
        if (this.props.onUnsort) {
            this.props.onUnsort(this.props.column);
        }
    }

    render() {

        const customItems = [];
        if (this.props.customItems) {
            const numItems = this.props.customItems.length;

            for (let i = 0; i < numItems; i++) {
                customItems.push(<Item key={i}
                                       label={this.props.customItems[i].label}
                                       icon={this.props.customItems[i].icon}/>);
            }
            customItems.push(<Separator key={numItems}/>);
        }

        return (
            <ContextMenu id={this.props.name} animation="fadeIn">
                { customItems }
                <Item label="Edit columns" icon="fa fa-list" onClick={this.props.onEditColumns}/>
                <Separator/>
                <Item label="Sort by this column" icon="fa fa-sort-amount-asc" onClick={this.onSort}/>
                <Item label="Unsort" icon="fa fa-undo" onClick={this.onUnsort}/>
            </ContextMenu>
        );
    }
}