import React, {Component} from 'react';
import {
  Grid,
} from "semantic-ui-react";
import Device from "./devices/Device";
import NewDevice from "./devices/NewDevice";
import {LightDevice, TemperatureSensor} from "./devices/TypesOfDevices";
import {editButtonStyle, panelStyle} from "./devices/styleComponents";

class Panel extends Component {

  constructor(props) {
    super(props);
    this.state = {
      editMode : false
    };
  }

  editModeController = (e) => {
    this.setState((prevState) => ({ editMode: !prevState.editMode }));
  };

  render() {
    const devices = [
      {
        "name": "Bedroom Light",
        ...LightDevice
      },
      {
        "name": "Bathroom Light",
        ...LightDevice
      },
      {
        "name": "Desktop Light",
        ...LightDevice
      },
      {
        "name": "Entrance Light",
        ...LightDevice
      },
      {
        "name": "Bedroom",
        ...TemperatureSensor
      }
    ];

    return (
      <div style={panelStyle}>
        <button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
        <Grid doubling columns={5} divided="vertically">
          {devices.map((e, i) => {
            return (
              <Grid.Column key={i.toString()}>
                <Device device={e} edit={this.state.editMode}/>
              </Grid.Column>
            )
          })}
          <Grid.Column>
            <NewDevice/>
          </Grid.Column>
        </Grid>
      </div>
    )
  }

}


export default class DevicePanel extends Component {

  constructor(props) {
    super(props);
    this.state = {
      shownRoom: "All"
    }
  }

  render() {
    return (
      <Panel/>
    )
  }

}