import * as React from "react";
import CSSProperties = React.CSSProperties;

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

import { DSText, DSTooltip } from "@dewesoft-web/ui/controls";

import * as theme from "./GridHeader.scss";

const TooltipedText = DSTooltip(DSText);

export interface GridHeaderProps {
    description : string;
    title : string;
    selected : boolean;
    type : any;
    contextId : string;
    onClick?();
}

const Th = (props) => {
    return (
        <ContextMenuProvider id={props.contextId} renderTag="th" style={props.style} className={props.className}>
            <TooltipedText tooltip={props.description} onClick={props.onClick} text={props.title}/>
        </ContextMenuProvider>
    );
};

export class GridHeader extends React.Component<GridHeaderProps, any> {

    props : GridHeaderProps;

    render() {
        const { description, title, selected, type, contextId } = this.props;

        const cssClasses = [
            theme.gridHeader,
            selected ? theme.selected : null
        ].join(" ").trim();

        let style = null;
        if (typeof type === "object" && type.width) {
            style = {
                width: type.width
            };
        }

        return <Th description={description}
                   className={cssClasses}
                   contextId={contextId}
                   title={title}
                   style={style}
                   onClick={this.props.onClick}
        />;
    }
}