import React, {Component} from 'react';
import {
    Grid,
} from "semantic-ui-react";
import {editButtonStyle, panelStyle} from "./devices/styleComponents";
import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants";
import DeviceType from './devices/DeviceTypeController';
import NewDevice from "./devices/NewDevice";

export default class DevicePanel extends Component {

    constructor(props) {
        super(props);
        this.state = {
            editMode : false,
            devices : this.props.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={this.props.devices.length > 0 ? this.props.devices.length : 1} divided="vertically">
                    {
                        this.props.devices ?
                            this.props.devices.map((e, i) => {
                                return (
                                    <Grid.Column key={i}>
                                        <DeviceType type={e.kind} onChangeData={this.changeDeviceData}  device={e} edit={this.state.editMode}/>
                                    </Grid.Column>
                                )
                            })
                        :
                            null
                    }
                    <Grid.Column>
                        <NewDevice/>
                    </Grid.Column>
                </Grid>
            </div>
        )
    }

}