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

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

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

    onClick = () => {
        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.typeToggle,
            cell.data ? theme.toggled : null,
        ].join(" ");

        let on = "On";
        let off = "Off";

        if (cell.type && cell.type.options) {
            on = cell.type.options.on || on;
            off = cell.type.options.off || off;
        }

        return (
            <div className={css} onClick={this.onClick} {...rest}>
                <div>
                    <Highlighter searchWords={[cell.filter]}
                                 textToHighlight={(cell.data ? on : off) || ""}
                    />
                    { cell.isReadOnly || children }
                </div>
            </div>
        );
    }
}

export const ToggleCell = ToggleCellType;