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

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

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

const LEFT_BUTTON = 0;

export const GroupRow = observer(function GroupRow(props : any) {
    const { row, onRowSelect, onStartSelect, onEditCell, onTrySelect, rowHeight, ...restProps } = props;

    const css = [
        theme.row,
        row.selected ? theme.selected : "",
        row.first ? theme.first : "",
        row.last ? theme.last : ""
    ].join(" ")
     .trim();

    // mouseDown
    function startSelectRow(col : ColumnModel, e : any) {
        if (e.button !== LEFT_BUTTON) {
            return;
        }

        if (!row.selected || !col.selected) {
            if (e.ctrlKey) {
                if (onRowSelect) {
                    // console.log("RowSelect CTRL");
                    onRowSelect(row, col);
                }
            }
            else if (e.shiftKey) {
                if (onRowSelect) {
                    // console.log("RowSelect SHIFT");
                    onRowSelect(row, col, true);
                }
            }
            else {
                if (onStartSelect) {
                    // console.log("StartSelect");
                    onStartSelect(row, col);
                }
            }
        }
        else if (!row.cells[col.property].isReadOnly && !e.ctrlKey) {
            if (onEditCell) {
                // console.log("OnEditCell");
                onEditCell(row, col);
            }
        }
        else if (col.selected && onRowSelect) {
            // console.log("OnRowSelect");
            onRowSelect(row, col);
        }
        else {
            // console.log("Unknown: ");
        }
    }

    function doSelect() {
        if (onTrySelect) {
            onTrySelect(row);
        }
    }

    function mouseUp(e) {

    }

    const style = {
        height: rowHeight + "px"
    };

    return (
        <div className={css} style={style}>
            <div className={theme.selectionMark}/>
            {
                row.columns.map(function(col : ColumnModel, index : number) {
                    if (!col.visible) {
                        return null;
                    }

                    const cell = row.cells[col.property];

                    return <RowCell cell={cell}
                                    first={index === 0}
                                    row={row}
                                    column={cell.column}
                                    key={cell.column.property}
                                    onMouseDown={startSelectRow}
                                    onMouseEnter={doSelect}
                                    onMouseUp={mouseUp}
                                    {...restProps}
                    />;
                })
            }
        </div>
    );
});