import * as React from "react";

import { GridCellModel } from "../../../model";

import * as theme from "./GridCellElement.scss";
import { observer } from "mobx-react";
import { GridText, GridNumber, GridColor, GridList, GridToggle } from "./types";

export interface GridCellElementProps {
    data : GridCellModel;
    type : string;
    options : any;
    readOnly? : boolean;
    selected : boolean;
    onChange?(value : any) : void;
}

@observer
export class GridCellElement extends React.Component<GridCellElementProps, any> {

    props : GridCellElementProps;

    getComponentForType(type : string, options: any, data : GridCellModel, selected : boolean, readOnly : boolean, onChange : Function) {
        const props : any = {
            data: data || {},
            selected: selected,
            onChange: onChange,
            readOnly: readOnly,
            ...options
        };

        let Component = null;
        switch (type) {
            case "float":
            case "int":
            case "uint":
            case "uint32":
            case "number":
                Component = GridNumber;
                break;
            case "color":
                Component = GridColor;
                break;
            case "enum":
                Component = GridList;
                break;
            case "toggle":
                Component = GridToggle;
                break;
            default:
                Component = GridText;
                break;
        }

        if (Component) {
            return <Component {...props} />;
        }
        return null;
    }

    render() {
        const { type, data, options, selected, readOnly, onChange } = this.props;

        return (
            <div className={theme.rowData}>
                { this.getComponentForType(type, options, data, selected, readOnly, onChange) }
            </div>
        );
    }
}