///Zooomer
import React from "react"
import {observer} from "mobx-react"
import store from "./PictureStore"
import NewProfile from "./NewProfile"

@observer
export default class Zoomer extends React.Component {
    zoomOut(){
        this.props.store.height -= 100;
    }

    zoomIn(){
        this.props.store.height += 100;
    }
    render() {
    return (

            <div className="profile-box">
                <NewProfile store={store} />
                <h2>{this.props.store.name}</h2>
                <h4>{this.props.store.age}</h4>
                <h4>{this.props.store.bio}</h4>
                <img src={this.props.store.src} height={this.props.store.height} />
                <br />
                <button onClick={this.zoomOut.bind(this)}>-</button>
                <button onClick={this.zoomIn.bind(this)}>+</button>


            </div>

        );
  }
}

////zoomer

///picstore
import {observable} from "mobx";


class PictureStore {


    @observable height = 100;
    @observable name = "Sloth";
    @observable age = 21;
    @observable bio = "Slothem Ipsum";
    @observable src = "https://goo.gl/sqz3f4";

}

var store = new PictureStore;
export default store;
///picstore
///newprofile
import React from "react"
import {observer} from "mobx-react"
import store from "./PictureStore"


@observer
export default class NewProfile extends React.Component {
    makeNewProfile(e){
        alert('aaaaaaaa')
    }
    getLink(e){
        var link = e.target.value;
    }
    getName(){
        var name = e.target.value;
    }
    getAge(){
        var age = e.target.value;
    }
    getBio(){
        var bio = e.target.value;
    }
    render(){

        return(
            <div>
                <form onSubmit={this.makeNewProfile.bind(this)}>
                    <input onChange={this.getLink} placeholder="Insert picture link"/><br />
                    <input onChange={this.getName} placeholder="Whats your name"/><br />
                    <input onChange={this.getAge} placeholder="How old are you"/><br />
                    <input onChange={this.getBio} placeholder="Something about you"/><br />
                    <button>Add</button>
                </form>
            </div>
            );
    }
}
///newprofile