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

import { ColorCell } from "./cell/ColorCell";
import { StringCell } from "./cell/StringCell";
import { ToggleCell } from "./cell/ToggleCell";
import { ButtonCell } from "./cell/ButtonCell";
import { NumberCell } from "./cell/NumberCell";
import { EnumCell } from "./cell/EnumCell";

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

export const RowCell = observer(function RowCell(props : any) {
    const { row, cell, column, first, onMouseDown, onMouseEnter, onMouseUp, onValueChanged, onStartEdit } = props;

    const style = {
        width: column.width ? column.width : "auto",
        // minWidth: column.width ? column.width : "auto"
    };

    const css = [
        theme.cell,
        column.selected && row.selected ? theme.selected : "",
        row.first ? theme.firstSelected : "",
        row.last ? theme.lastSelected : "",
        cell.editing ? theme.editing : "",
        cell.isReadOnly ? theme.readOnly : ""
    ].join(" ")
     .trim();

    function mouseDown(e) {
        if (onMouseDown) {
            onMouseDown(column, e);
        }
    }

    function mouseEnter(e) {
        if (onMouseEnter && column.selected) {
            onMouseEnter();
        }
    }

    function mouseUp(e) {
        if (onMouseUp && column.selected) {
            onMouseUp();
        }
    }

    function renederCellType() {

        switch (cell.type.kind.toUpperCase()) {
            case "COLOR":
                return <ColorCell cell={cell}
                                  row={row}
                                  column={column}
                                  onValueChanged={onValueChanged}
                />;
            case "TOGGLE":
                return <ToggleCell cell={cell}
                                   row={row}
                                   column={column}
                                   onValueChanged={onValueChanged}
                />;
            case "BUTTON":
                return <ButtonCell cell={cell}
                                   row={row}
                                   column={column}
                                   onValueChanged={onValueChanged}
                />;
            case "NUMBER":
                return <NumberCell cell={cell}
                                   row={row}
                                   column={column}
                                   onValueChanged={onValueChanged}
                />;
            case "ENUM":
                return <EnumCell cell={cell}
                                 row={row}
                                 column={column}
                                 onValueChanged={onValueChanged}
                                 onStartEdit={onStartEdit}
                />;
            default:
                // console.log(cell.type.kind.toUpperCase());

                return <StringCell cell={cell}
                                   row={row}
                                   column={column}
                                   onValueChanged={onValueChanged}
                />;
        }
    }

    return (
        <div className={css}
             style={style}
             data-first-col={!!first}
             data-col-order={column.order}
             onMouseDown={mouseDown}
             onMouseEnter={mouseEnter}
             onMouseUp={mouseUp}
        >
            { renederCellType() }
        </div>
    );
});