import * as React from "react";
import { GridSpacer } from "./spacer/GridSpacer";

import { observer } from "mobx-react";

import * as theme from "./GridRow.scss";
import { GridCell } from "./data/GridCell";
import { GridColumnModel, GridRowModel } from "../model";

export interface GridRowProps {
    columns : GridColumnModel[];
    row : GridRowModel;
    showGroups : boolean;
    onChangeData(value : any) : void;
    onStartSelect(row : GridRowModel, col : string);
    onRowSelect(row : GridRowModel, col : string, selectToRow? : boolean);
    onEditCell(row : GridRowModel, col : string);
    onTrySelect(row : GridRowModel);
}

const LEFT_BUTTON = 0;

@observer
export class GridRow extends React.Component<GridRowProps, any> {

    props : GridRowProps;

    constructor(props : GridRowProps) {
        super(props);

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

    // mouseDown
    startSelectRow(col : GridColumnModel, e : MouseEvent) {
        if (e.button !== LEFT_BUTTON) {
            return;
        }

        if (!this.props.row.selected || !col.selected) {
            if (e.ctrlKey) {
                if (this.props.onRowSelect) {
                    this.props.onRowSelect(this.props.row, col.property);
                }
            }
            else if (e.shiftKey) {
                if (this.props.onRowSelect) {
                    this.props.onRowSelect(this.props.row, col.property, true);
                }
            }
            else {
                if (this.props.onStartSelect) {
                    this.props.onStartSelect(this.props.row, col.property);
                }
            }
        }
        else if (!col.readOnly && !this.props.row.readOnly && !e.ctrlKey) {
            if (this.props.onEditCell) {
                this.props.onEditCell(this.props.row, col.property);
            }
        }
        else if (col.selected && this.props.onRowSelect) {
            this.props.onRowSelect(this.props.row, col.property);
        }
    }

    // mouseEnter
    doSelect() {
        if (this.props.onTrySelect) {
            this.props.onTrySelect(this.props.row);
        }
    }

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

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

        return (
            <tr className={classNames} onMouseEnter={this.doSelect}>
                <GridSpacer display={showGroups}/>
                {
                    row && columns.map((col : GridColumnModel, idx : number) => {
                        if (!col.visible) {
                            return null;
                        }

                        return <GridCell key={col.property}
                                         type={col.type}
                                         readOnly={col.readOnly}
                                         cellProperty={col.property}
                                         isFirst={idx === 0}
                                         rowReadOnly={row.readOnly}
                                         rowSelected={row.selected}
                                         firstSelected={row.first}
                                         lastSelected={row.last}
                                         data={row.data[col.property]}
                                         onChange={this.props.onChangeData}
                                         onMouseDown={this.startSelectRow.bind(this, col)}
                                         columnSelected={col.selected}/>;
                    })
                }
            </tr>
        );
    }
}