// @flow
import React from "react";
import AppBar from "material-ui/AppBar";
import Toolbar from "material-ui/Toolbar";
import { CircularProgress } from "material-ui/Progress";
import IconButton from "material-ui/IconButton";
import Typography from "material-ui/Typography";

const TopBarLayerSelector = (_props: Object) => (
  <IconButton>
    <i className="mdi mdi-layers"></i>
  </IconButton>
);

const TopBarIndicatorMenu = (props: Object) => (
  <IconButton>
    {props.mqtt.connected ?
      (<i style={{fontSize: 48}} className="mdi mdi-map"></i>) :
      (<i style={{fontSize: 48}} className="mdi mdi-lan-disconnect"></i>)}
  </IconButton>
);


const TopBarIndicator = (props: Object) => {
  if (props.mqtt == null || props.mqtt.reconnecting) {
    return (<CircularProgress size={48}
      style={{color: "rgba(0, 0, 0, 0.54)"}} />);
  } else {
    return (<TopBarIndicatorMenu {...props} />);
  }
};

const TopBar = (props: Object) => (
  <AppBar position="static">
    <Toolbar>
      <TopBarIndicator {...props} />
      <Typography type="title">{props.title}</Typography>
      {false && <TopBarLayerSelector {...props} />}
    </Toolbar>
  </AppBar>
);

export default TopBar;