import * as React from "react";
import * as Highlighter from "react-highlight-words";

import * as theme from "./ButtonCell.scss";
import { observer } from "mobx-react";

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

    onClick = () => {
        // cell.data = !cell.data;
        if (this.props.onValueChanged && !this.props.cell.isReadOnly) {
            this.props.onValueChanged(!this.props.cell.data);
        }
    };

    render() {
        const { cell, row, column, theme: rippleTheme, onValueChanged, children, ...rest } = this.props;

        const css = [
            theme.typeButton
        ].join(" ");

        return (
            <div className={css} onClick={this.onClick} {...rest}>
                <div>
                    <Highlighter searchWords={[cell.filter]}
                                 textToHighlight={cell.type.label || ""}
                    />
                </div>
            </div>
        );
    }
}

export const ButtonCell = ButtonCellType;