import * as React from "react";

export interface DebuggerTableProps {
    header: string;
    frozen?: boolean;
}

export class DebuggerTable extends React.Component<DebuggerTableProps> {
    
() {
        return <div className="ui varExplorer">
            <div className="ui variableTableHeader">
                {this.props.header}
            </div>
            <div className={`ui segment debugvariables ${this.props.frozen ? "frozen" : ""} ui collapsing basic striped table`}>
                {this.props.children}
            </div>
        </div>
    }
}

export interface DebuggerTableRowProps {
    leftText: string;
    rightText: string;

    refID?: string | number;
    icon?: string;
    rightTitle?: string
    rightClass?: string;
    leftTitle?: string;
    leftClass?: string;
    depth?: number;
    rowClass?: string;

    onClick?: (e: React.SyntheticEvent<HTMLDivElement>, component: DebuggerTableRow) => void;
}

export class DebuggerTableRow extends React.Component<DebuggerTableRowProps> {
    render() {
        return <div role="listitem" className={`item ${this.props.rowClass || ""}`} onClick={this.props.onClick ? this.clickHandler : undefined}>
            <div className="variableAndValue">
                <div className={`variable varname ${this.props.leftClass || ""}`} title={this.props.leftTitle} style={this.props.depth ? { marginLeft: (this.props.depth * 0.75) + "em" } : undefined}>
                    { <i className={`ui icon small ${this.props.icon || "invisible"}`} /> }
                    <span>{this.props.leftText}</span>
                </div>
                <div className="variable detail" style={{ padding: 0.2 }} title={this.props.rightTitle}>
                    <span className={`varval ${this.props.rightClass || ""}`}>{this.props.rightText}</span>
                </div>
            </div>
        </div>
    }

    protected clickHandler = (e: React.SyntheticEvent<HTMLDivElement>) => {
        if (this.props.onClick) this.props.onClick(e, this);
    }
}
render