import React, {Component} from 'react';
import {
  Grid,
} from "semantic-ui-react";
import Device from "./devices/Device";
import NewDevice from "./devices/NewDevice";
import {LightDevice, SmartPlugDevice} from "./devices/TypesOfDevices";
import {editButtonStyle, panelStyle} from "./devices/styleComponents";
import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants";
import Light from "./devices/Light";
import SmartPlug from "./devices/SmartPlug";
import Sensor from "./devices/Sensor";
import DigitalSensor from "./devices/DigitalSensor";
import Switch from "./devices/Switch";


const devices = [
  {
    "id": 1,
    "name": "Bedroom Light",
    "type": "light",
    "hasIntensity": true,
    "intensityLevel": 0.20,
    ...LightDevice
  },
  {
    "id": 2,
    "name": "Bathroom Light",
    "type": "light",
    ...LightDevice
  },
  {
    "id": 3,
    "name": "Desktop Light",
    "type": "light",
    ...LightDevice
  },
  {
    "id": 4,
    "name": "Entrance Light",
    "type": "light",
    ...LightDevice
  },
  {
    "id": 5,
    "name": "Smart Plug",
    "type": "smartplug",
    ...SmartPlugDevice
  },
  {
    "id": 6,
    "name": "Bedroom Thermometer",
    "type": "temperature-sensor",
  },
  {
    "id": 7,
    "name": "Bedroom Alarm",
  },

];

class Panel extends Component {

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

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

  changeDeviceData = (deviceId, newSettings) => {
    console.log(newSettings.name, " <-- new name --> ", deviceId);
    this.state.devices.map(device => {
      if (device.id === deviceId) {
        for (let prop in newSettings) {
          if (device.hasOwnProperty(prop)) {
            if (prop === "name") {
              if (checkMaxLength(newSettings[prop])) {
                device[prop] = newSettings[prop];
              } else {
                alert("Name must be less than " + DEVICE_NAME_MAX_LENGTH + " characters.");
              }
            } else {
              device[prop] = newSettings[prop];
            }

          }
        }
      }
      return null;
    });
    this.forceUpdate();
  };


  render() {
    return (
      <div style={panelStyle}>
        <button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
        <Grid doubling columns={5} divided="vertically">
          <Grid.Column>
            <Light onChangeData={this.changeDeviceData} device={devices[0]} edit={this.state.editMode}/>
          </Grid.Column>
          <Grid.Column>
            <SmartPlug onChangeData={this.changeDeviceData} device={devices[4]} edit={this.state.editMode}/>
          </Grid.Column>
          <Grid.Column>
            <Sensor onChangeData={this.changeDeviceData} device={devices[5]} edit={this.state.editMode}/>
          </Grid.Column>
          <Grid.Column>
            <Switch onChangeData={this.changeDeviceData} device={devices[6]} 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/>
    )
  }

}