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

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

  render() {
    return (
      <Grid doubling columns={2} divided="vertically">
        {
          //TODO DISPLAY DEVICES IN SCENE
        }
        {this.props.isActiveDefaultScene ? (
          <Grid.Column>
            <NewSceneDevice />
          </Grid.Column>
        ) : null}
      </Grid>
    );
  }
}

const mapStateToProps = (state, _) => ({
  get isActiveDefaultScene() {
    return state.active.activeScene === -1;
  },
  activeScene: state.active.activeScene,
});
const ScenesPanelContainer = connect(
  mapStateToProps,
  RemoteService
)(ScenesPanel);
export default ScenesPanelContainer;