import * as React from "react";
import { CSSProperties } from "react";
import { IconButton } from "react-toolbox/lib/button";
import { observer } from "mobx-react";

import * as theme from "./GroupTitle.scss";

const ConnectionStatus = ({ status, onClick } : any) => {

    let connected = true;
    if (status) {
        connected = status.toLowerCase() !== "not connected";
    }

    if (connected) {
        return <span>{ status }</span>;
    }
    else {
        const css : CSSProperties = {
            height: "17px",
            fontSize: "10px",
            fontWeight: "bold",
            textTransform: "uppercase",
            verticalAlign: "middle",
            paddingTop: "0px",
            borderTopWidth: "2px"
        };

        return <input type="button" value="Connect" height="20px" style={css} onClick={onClick}/>;
    }
};

export const GroupTitle = observer(({ group } : any) => {
    return (
        <div className={theme.groupTitle} onClick={group.toggleExpanded}>
            <IconButton icon="expand_more" ripple={false}/>
            <span className={theme.title}>-- { group.name || "Ungrouped" } -- <ConnectionStatus status={group.status} onClick={group.connectClicked}/></span>
        </div>
    );
});

(GroupTitle as any).displayName = "GroupTitle";