import React, { Component } from "react";
import { connect } from "react-redux";
import { RemoteService } from "../../remote";
import Device from "./devices/Device";
import NewSceneDevice from "./NewSceneDevice";
import { Grid, Button } from "semantic-ui-react";

class ScenesPanel extends Component {
  constructor(props) {
    super(props);

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

  applyScene() {
    console.log(this.props.activeScene);
    this.props.sceneApply(this.props.activeScene);
  }

  render() {
    return (
      <Grid doubling columns={2} divided="vertically">
        {!this.props.isActiveDefaultScene ? (
          <Grid.Row centered>
            <Button color="blue" onClick={this.applyScene}>
              Apply Scene
            </Button>
          </Grid.Row>
        ) : null}
        {!this.props.isActiveDefaultScene
          ? this.props.sceneStates.map((e, i) => {
              return (
                <Grid.Column key={i}>
                  <Device tab={this.props.tab} id={e.id} />
                </Grid.Column>
              );
            })
          : null}
        {!this.props.isActiveDefaultScene ? (
          <Grid.Column>
            <NewSceneDevice />
          </Grid.Column>
        ) : (
          <Grid.Column>Welcome to the Scene View, you add a Scene</Grid.Column>
        )}
      </Grid>
    );
  }
}

const mapStateToProps = (state, _) => ({
  get sceneStates() {
    if (state.active.activeScene !== -1) {
      const stateArray = [
        ...state.scenes[state.active.activeScene].sceneStates,
      ].sort();
      console.log(stateArray);
      return stateArray;
    } else {
      return [];
    }
  },
  get isActiveDefaultScene() {
    return state.active.activeScene === -1;
  },
  activeScene: state.active.activeScene,
});
const ScenesPanelContainer = connect(
  mapStateToProps,
  RemoteService
)(ScenesPanel);
export default ScenesPanelContainer;