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";


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",
    },
];

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>
                        <NewDevice/>
                    </Grid.Column>
                </Grid>
            </div>
        )
    }

}


export default class DevicePanel extends Component {

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

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

}