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

import { ColumnModel } from "../models/ColumnModel";
import { GridHeader } from "./GridHeader";

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

export const GirdHeaders = observer(function GridHeaders(props : any) {
    const { columns, top, onClick } = props;

    return (  
        <div className={theme.headers} style={{ top: top || 0 }}>
            <div className={theme.selectionMark}/>
            {
                columns.map(function(col : ColumnModel) {
                    if (!col.visible) {
                        return null;
                    }

                    return <GridHeader column={col}
                                       key={col.property}
                                       onClick={onClick}
                    />;
                })
            }
        </div>
    );
});