import * as React from "react";
import { observer } from "mobx-react";

import { GridHeader } from "./header/GridHeader";
import { GridHeaderSpacer } from "./spacer/GridHeaderSpacer";
import { GridColumnModel } from "../model/";

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

export interface GridHeadersProps {
    showGroups : boolean;
    columns : GridColumnModel[];
    selectedColumn : GridColumnModel;
    onColumnClicked?(col : string);
}

@observer
export class GridHeaders extends React.Component<GridHeadersProps, any> {

    props : GridHeadersProps;

    constructor(props) {
        super(props);

        this.onColumnClicked = this.onColumnClicked.bind(this);
    }

    onColumnClicked(col : string) {
        if (this.props.onColumnClicked) {
            this.props.onColumnClicked(col);
        }
    }

    render() {
        const { showGroups, columns, selectedColumn } = this.props;

        return (
            <thead>
                <tr className={theme.headerRow}>
                    <GridHeaderSpacer display={showGroups} />
                    {
                        columns.map((col : GridColumnModel, idx : number) => {
                            if (!col.visible) {
                                return null;
                            }

                            return <GridHeader key={col.property}
                                               type={col.type}
                                               title={col.title}
                                               selected={col === selectedColumn}
                                               description={col.description}
                                               contextId={col.contextId}
                                               onClick={() => this.onColumnClicked(col.property)}
                            />;
                        })
                    }
                </tr>
            </thead>
        );
    }
}