import * as React from "react";

import * as theme from "./GridCell.scss";
import { GridCellModel } from "../../model";

import { observer } from "mobx-react";
import { GridCellElement } from "./element/GridCellElement";

type MouseEvent = React.MouseEvent<HTMLTableDataCellElement>;

export interface GridCellProps {
    isFirst : boolean;
    data : GridCellModel;
    rowSelected : boolean;
    firstSelected : boolean;
    lastSelected : boolean;
    readOnly? : boolean;
    rowReadOnly? : boolean;
    cellProperty : string;

    columnSelected : boolean;
    type : { kind : string };
    onChange?(value : any) : void;
    onMouseDown?(e : MouseEvent) : void;
}

declare function getCssClass(css : string[]) : string;

const missingValueData = {
    value: null,
    editing: false,
    temp: null,
    type: {
        kind: "string"
    }
} as GridCellModel;

@observer
export class GridCell extends React.Component<GridCellProps, any> {

    props : GridCellProps;

    constructor(props : GridCellProps) {
        super(props);
    }

    render() {
        let {
            isFirst,
            data,
            rowSelected,
            rowReadOnly,
            firstSelected,
            lastSelected,
            columnSelected,
            readOnly,
            cellProperty,
            type,
            onChange,
            ...props
        } = this.props;

        // console.log("type: " + type.kind + ", readOnly: " + readOnly);

        if (!data) {
            data = missingValueData;
        }

        let actualType : any = type;
        if (data.type) {
            // merge cell type with column one where cell type has priority
            actualType = { ...type, ...data.type };
            const a = 2;
        }

        if (!actualType) {
            actualType = {
                kind: "string",
                readOnly: readOnly
            };
        }
        else if (actualType.readOnly === undefined) {
            actualType.readOnly = readOnly;
        }

        let { kind, readOnly: cellReadOnly, ...options } = actualType;

        if (rowReadOnly) {
            cellReadOnly = rowReadOnly;
        }

        const classNames = getCssClass([
            theme.data,
            isFirst ? theme.firstColumn : null,
            rowSelected ? theme.rowSelected : null,
            data && data.editing && type.kind !== "Toggle" ? theme.editing : null,
            rowSelected && columnSelected ? theme.selected : null,
            firstSelected ? theme.firstSelected : null,
            lastSelected ? theme.lastSelected : null,
            cellReadOnly ? theme.readOnly : null
        ]);

        return (
            <td className={classNames}
                data-dsgrid-col={cellProperty}
                {...props}
            >
                <GridCellElement data={data}
                                 readOnly={cellReadOnly}
                                 type={kind.toLowerCase()}
                                 options={options}
                                 selected={rowSelected && columnSelected}
                                 onChange={onChange}/>
            </td>
        );
    }
}