import React, { Component } from "react";
import DevicePanel from "../components/dashboard/DevicePanel";
import ScenesPanel from "../components/dashboard/ScenesPanel";
import AutomationsPanel from "../components/dashboard/AutomationsPanel";
import Navbar from "./Navbar";
import ScenesNavbar from "./ScenesNavbar";
import AutomationsNavbar from "./AutomationsNavbar";
import MyHeader from "../components/HeaderController";
import { Grid, Responsive, Button } from "semantic-ui-react";
import {
  panelStyle,
  mobilePanelStyle,
} from "../components/dashboard/devices/styleComponents";

import { RemoteService } from "../remote";
import { connect } from "react-redux";
import { appActions } from "../storeActions";

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = this.initialState;
    this.setInitialState();

    this.selectTab = this.selectTab.bind(this);
  }

  get initialState() {
    return {
      activeTab: this.activeTab,
    };
  }

  setInitialState() {
    this.setState(this.initialState);
  }

  get activeTab() {
    return this.props.activeTab;
  }

  set activeTab(tab) {
    this.props.setActiveTab(tab);
  }

  selectTab(e, { name }) {
    this.setState({ activeTab: name });
    this.activeTab = name;
  }

  renderTab(tab) {
    switch (tab) {
      case "Devices":
        return <DevicePanel tab={this.state.activeTab} />;
      case "Scenes":
        return <ScenesPanel />;
      case "Automations":
        return <AutomationsPanel />;
      default:
        return <h1>ERROR</h1>;
    }
  }

  renderNavbar(tab) {
    switch (tab) {
      case "Devices":
        return <Navbar />;
      case "Scenes":
        return <ScenesNavbar />;
      case "Automations":
        return <AutomationsNavbar />;
      default:
        return <h1>ERROR</h1>;
    }
  }

  render() {
    return (
      <div style={{ background: "#1b1c1d" }}>
        <Responsive minWidth={768}>
          <Grid>
            <Grid.Row color="black">
              <Grid.Column>
                <MyHeader />
              </Grid.Column>
            </Grid.Row>
            <Grid.Row color="black">
              <Grid.Column width={3}></Grid.Column>
              <Grid.Column textAlign="center" width={13}>
                <Button
                  basic
                  name="Devices"
                  content="Devices"
                  active={this.activeTab === "Devices"}
                  color={this.activeTab === "Devices" ? "yellow" : "grey"}
                  onClick={this.selectTab}
                />
                <Button
                  basic
                  name="Scenes"
                  content="Scenes"
                  active={this.activeTab === "Scenes"}
                  color={this.activeTab === "Scenes" ? "yellow" : "grey"}
                  onClick={this.selectTab}
                />
                <Button
                  basic
                  name="Automations"
                  content="Automations"
                  active={this.activeTab === "Automations"}
                  color={this.activeTab === "Automations" ? "yellow" : "grey"}
                  onClick={this.selectTab}
                />
              </Grid.Column>
            </Grid.Row>
            <Grid.Row color="black">
              <Grid.Column width={3}>
                {this.renderNavbar(this.activeTab)}
              </Grid.Column>

              <Grid.Column width={13}>
                <div style={panelStyle}>{this.renderTab(this.activeTab)}</div>
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </Responsive>
        <Responsive maxWidth={768}>
          <Grid inverted>
            <Grid.Row color="black">
              <Grid.Column>
                <MyHeader />
              </Grid.Column>
            </Grid.Row>
            <Grid.Row color="black">
              <Grid.Column textAlign="center">
                <Button
                  basic
                  name="Devices"
                  content="Devices"
                  active={this.activeTab === "Devices"}
                  color={this.activeTab === "Devices" ? "yellow" : "grey"}
                  onClick={this.selectTab}
                />
                <Button
                  basic
                  name="Scenes"
                  content="Scenes"
                  active={this.activeTab === "Scenes"}
                  color={this.activeTab === "Scenes" ? "yellow" : "grey"}
                  onClick={this.selectTab}
                />
                <Button
                  basic
                  name="Automations"
                  content="Automations"
                  active={this.activeTab === "Automations"}
                  color={this.activeTab === "Automations" ? "yellow" : "grey"}
                  onClick={this.selectTab}
                />
              </Grid.Column>
            </Grid.Row>
            <Grid.Row color="black">
              <Grid.Column color="black">
                {this.renderNavbar(this.activeTab)}
              </Grid.Column>
            </Grid.Row>
            <Grid.Row>
              <Grid.Column>
                <div style={mobilePanelStyle}>
                  {this.renderTab(this.activeTab)}
                </div>
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </Responsive>
      </div>
    );
  }
}

const mapStateToProps = (state, _) => ({
  activeTab: state.active.activeTab,
});

const setActiveTab = (activeTab) => {
  return (dispatch) => dispatch(appActions.setActiveTab(activeTab));
};

const DashboardContainer = connect(mapStateToProps, {
  ...RemoteService,
  setActiveTab,
})(Dashboard);
export default DashboardContainer;