import React, {Component} from "react";
import {Button, Form} from "semantic-ui-react";
import {editModeIconStyle, editModeStyle, formStyle} from "./styleComponents";

class SettingsForm extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    };

    onChangeHandler = (event) => {
        let nam = event.target.name;
        let val = event.target.value;
        this.setState({[nam]: val});
    };

    saveChanges = () => {
        let newName = this.state["new-name"];
        this.props.onChangeData(this.props.id, {"name": newName});
    };

    render() {
        return (
            <Form style={formStyle}>
                <Form.Field>
                    <label style={{color: "white"}}>New Device Name</label>
                    <input name="new-name" placeholder='New name' onChange={this.onChangeHandler}/>
                </Form.Field>
                <Button type='submit' onClick={this.saveChanges}>Save</Button>
            </Form>
        )
    }
}


export default class Settings extends Component {
    constructor(props) {
        super(props);
        this.state = {
            displayForm: false,
        }
    };

    displayForm = () => {
        this.setState((prevState) => ({displayForm: !prevState.displayForm}));
    };

    render() {
        const view = (
            <div>
                {this.state.displayForm ? (
                    <SettingsForm id={this.props.deviceId} onChangeData={this.props.onChangeData}/>) : ("")}
                <div onClick={this.displayForm}>
                        <span style={editModeStyle}>
                            {!this.state.displayForm ? (
                                <img
                                src="/img/settings.svg"
                                alt=""
                                style={editModeIconStyle}/>)
                                :
                                <p style={{color: "white"}}>&times;</p>
                            }
                        </span>
                </div>
            </div>
        );
        return (
            <React.Fragment>
                {this.props.edit ? view : ("")}
            </React.Fragment>
        )
    };
}