import React from 'react'

import { Button, Form, Container, Row, Col, Table } from 'react-bootstrap';

class Settings extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            name: '',
            type: '',
            dirt: '',
            plants: [],
            types: ['Chile', 'Mint'], // hardcoded for now
            dirts: ['Vegetable Soil', 'Potting Soil'], // hardcoded for now
            updateId: -1,
            btnName: 'submit'
        }
    }

    componentDidMount(){
        // fetch data from db here
        
    }

    render(){
        return (
            <>  
                <Container>
                    <Row className="justify-content-md-center">
                        <Col md="auto">
                            <h1>Settings</h1>
                        </Col>
                    </Row>
                    <Row className="justify-content-md-center">
                        <a>Configurate your plant here. Based on your settings the smart garden will automate your plant environment.</a>
                    </Row>

                    <br></br>

                    {
                        this.state.updateId >= 0 | this.state.plants.length === 0? // show the form only if we edit the plant or there is no plant set yet
                        <Form onSubmit={this.handleSubmit}>
                            <Form.Group controlId="exampleForm.ControlInput1">
                                <Form.Label>Name</Form.Label>
                                <Form.Control
                                    type="text"
                                    value={this.state.name}
                                    autoFocus ref={(input) => {this.nameInput=(input)}}
                                    placeholder="plant"
                                    onChange={(e)=>this.setState({name:e.target.value})} />
                            </Form.Group>
                            <Form.Group controlId="exampleForm.ControlSelect1">
                                <Form.Label>Type</Form.Label>
                                <Form.Control 
                                    as="select"
                                    type="text"
                                    value={this.state.type}
                                    onChange={(e)=>this.setState({type:e.target.value})}
                                >
                                    <option></option>
                                    {this.state.types.map((type, index) => {
                                        return <option key={index} value={type}>{type}</option>
                                    })}
                                </Form.Control>
                            </Form.Group>
                            <Form.Group controlId="exampleForm.ControlSelect1">
                                <Form.Label>Dirt</Form.Label>
                                <Form.Control 
                                    as="select"
                                    type="text"
                                    value={this.state.dirt}
                                    onChange={(e)=>this.setState({dirt:e.target.value})}
                                >
                                    <option></option>
                                    {this.state.dirts.map((dirt, index) => {
                                        return <option key={index}>{dirt}</option>
                                    })}
                                </Form.Control>
                            </Form.Group>
                                <Button type={"submit"}>{this.state.btnName}</Button>
                        </Form>
                        :null
                    }
                    

                    <Row className="justify-content-md-center">
                        <Col md={{ span: 4, offset: 4 }}></Col>
                    </Row>

                    <br></br>
                    
                    {
                        this.state.plants.length !== 0?
                        <Table striped bordered hover>
                        <thead>
                            <tr>
                            <th>Plant name</th>
                            <th>Plant type</th>
                            <th>Dirt type</th>
                            <th></th>
                            <th></th>
                            </tr>
                        </thead>
                        <tbody>
                        {
                            this.state.plants.map((plant, index) => {
                                return <tr key={index}>
                                            <td>{plant[0]}</td>
                                            <td>{plant[1]}</td>
                                            <td>{plant[2]}</td>
                                            <td><Button type={"button"} onClick={() => this.editItem(plant[0], plant[1], plant[2], index)}>Edit</Button></td>
                                            <td><Button type={"button"} onClick={() => this.removeItem(plant)}>Delete</Button></td>
                                        </tr>
                            })
                        }
                        </tbody>
                        </Table>
                        : null
                    }

                </Container>

            </>
        );
    }

    // search for arrow function for further syntax knowledge
    handleSubmit = (e) => {
        e.preventDefault();
        if (this.state.updateId >= 0) { // check if it is in edit mode
            this.state.plants[this.state.updateId][0] = this.state.name;
            this.state.plants[this.state.updateId][1] = this.state.type;
            this.state.plants[this.state.updateId][2] = this.state.dirt; // updates the name of the plant
            this.setState({
                updateId:-1, // Todo check docu
                name:'', // reset inputtext again
                btnName:'submit' // reset button to submit again
            })
        } else {
            let newDataElement = [
                this.state.name,
                this.state.type,
                this.state.dirt
            ]
            console.log("name " + newDataElement[0])
            console.log("type " + newDataElement[1])
            console.log("dirt " + newDataElement[2])
            this.setState(prevState =>({
                plants:[...prevState.plants, newDataElement], // adds a new plant array
                name:'' //to reset the inputfield
            }))
            return this.state.plants;
        }
        
    }
    

    removeItem = (value) => {
        this.setState({
            plants:this.state.plants.filter((plant) => { // filter function add docu
                return plant !== value;
            }),
            name:''
        })
    }

    editItem = (editedName, editedType, editedDirt, index) => {
        this.setState({
            name:editedName,
            type:editedType,
            dirt:editedDirt,
            btnName:'update',
            updateId:index // should be edited to a boolean
        })
    }


}

export default Settings;