//------------------------------------------------------------------------------------------------------------------------------
//Classes-----------------------------------------------------------------------------------------------------------------------
//------------------------------------------------------------------------------------------------------------------------------



var Main = React.createClass(
{
  getInitialState: function() {
    // return {
    //   boards: [
    //   {
    //     type: 'teensy',
    //     name: 'bela1'
    //   },
    //   {
    //     type: 'photon',
    //     name: 'jozsiasd'
    //   },
    //   {
    //     type: 'arduino',
    //     name: 'repa fozelek'
    //   },
    //   {
    //     type: 'teensy',
    //     name: 'krumplist teszta'
    //   }]
    // }
    return {
      boards: []
    }
  },

  addBoard: function(boardConfig) {
    const newBoard = {
      name: boardConfig.name,
      type: boardConfig.type
    }

    this.setState({
      boards: [...this.state.boards, newBoard]
    });
  },

  renderElement: function(element) {
    switch (element.type) {
      case 'teensy':
        return <Teensy name={element.name}/>
      case 'photon':
        return <Photon name={element.name}/>
      case 'arduino':
        return <Arduino name={element.name}/>
    }
  },

  render: function() {
    console.log(this.state.boards);
      return (
            <div>
          {this.state.boards.map( (element) => {
            return this.renderElement(element);
          })}
            <AddButton onClickFunc={this.addBoard}/>
            </div>
      );
  }
});
//Teensy class
var Teensy=React.createClass(
{
    clickEve: function(data){
        console.log("Onclick", data);
    },
    getInitialState: function () {
          return {
            opacity: 0
          };
        },
    componentDidMount: function () {
        var fadeTim = setInterval(fadeTimeout.bind(this), 100);
        function fadeTimeout() {
            var opacity = this.state.opacity;
            opacity += .05;
            if (opacity >= 1.0) {
                console.log("Interval cleared", opacity);
              clearInterval(fadeTim);
            }

            this.setState({
              opacity: opacity
            });
          }
        },

    render: function(){
        console.log("Teensy created");
        const v=1;
        return(
            <div style={{display:'inline-block', paddingLeft:'20', paddingRight:'20', opacity:this.state.opacity}}>
                <h2>Teensy: {this.props.name}</h2>
                <img onClick={this.clickEve} src="/pics/teensy_p.png" height="20" width="10"/>
            </div>
        );
    }
}
);
//Arduino class
var Arduino=React.createClass(
{
    getInitialState: function () {
          return {
            opacity: 0
          };
        },
    componentDidMount: function () {
        var fadeTim = setInterval(fadeTimeout.bind(this), 100);
        function fadeTimeout() {
            var opacity = this.state.opacity;
            opacity += .05;
            if (opacity >= 1.0) {
                console.log("Interval cleared", opacity);
              clearInterval(fadeTim);
            }

            this.setState({
              opacity: opacity
            });
          }
        },
    render: function(){
        console.log("Arduino created");
        return(
        <div style={{display:'inline-block', paddingLeft:'20', paddingRight:'20', opacity: this.state.opacity}}>
            <h2>Arduino: {this.props.name}</h2>
            <img src="/pics/arduino-nano_p.png" height="500" width="200"/>
        </div>
        );
    }
}
);
//photon class
var Photon=React.createClass(
{
    getInitialState: function () {
          return {
            opacity: 0
          };
        },
    componentDidMount: function () {
        var fadeTim = setInterval(fadeTimeout.bind(this), 100);
        function fadeTimeout() {
            var opacity = this.state.opacity;
            opacity += .05;
            if (opacity >= 1.0) {
                console.log("Interval cleared", opacity);
              clearInterval(fadeTim);
            }

            this.setState({
              opacity: opacity
            });
          }
        },
    render: function(){
        console.log("Photon created");
        return(
        <div style={{display:'inline-block', paddingLeft:'20', paddingRight:'20', opacity:this.state.opacity}}>
            <h2>Photon: {this.props.name}</h2>
            <img src="/pics/photon_p.png" height="400" width="200"/>
        </div>
        );
    }
}
);

var Photon2=React.createClass(
{
    render: function(){
        console.log("Photon2 created");
        return(
        <div style={{display:'inline-block', width:'200', height:'400', borderRadius:'25', paddingLeft:'20', paddingRight:'20', background:'#424242', margin:'20'}}>
            <h2>Photon2: {this.props.name}</h2>
            <PItem id='1' mode='In' value='Low'/>
            <PItem id='2' mode='In' value='Low'/>
            <PItem id='3' mode='In' value='Low'/>
            <PItem id='4' mode='In' value='Low'/>
        </div>
        );
    }
}
);

var PItem=React.createClass(
{
    click: function(data){
        console.log("Click",data.target.id);
    },
    render: function(){
        console.log("Photon2 created");
        return(
        <div>
        {this.props.mode}
        <div id={this.props.id} style={{display:'inline-block', width:'50', height:'50', borderRadius:'25', background:'#78909C', marginTop:'10'}} onClick={this.click}></div>
        {this.props.value}
        </div>
        );
    }
}
);

var AddButton=React.createClass({
    getInitialState: function () {
          return {
            borderColor: '#2196F3'
          };
        },
    clickEve: function(data){
        console.log("Plus");
    if (this.props.onClickFunc) {
      this.props.onClickFunc({
        type: 'teensy',
        name: 'lofaszjoska' + Math.random(1000)
      });
    }
    },
    mouseE: function(){
        console.log("MouseO");

        this.setState({
              borderColor: '#BBDEFB'
            });
    },
    mouseL: function(){
        console.log("MouseO");

        this.setState({
              borderColor: '#2196F3'
            });
    },
    render: function(){
        console.log("Addbutton created");
        return(
        <div style={{display:'inline-block', width:'300', height:'250', borderStyle:'solid', borderWidths:'10', borderColor:this.state.borderColor, borderRadius:'25', background:'#2196F3', position: 'absolute', top: '0', right: '0'}} onClick={this.clickEve} onMouseEnter={this.mouseE} onMouseLeave={this.mouseL}>
            <img src="/pics/plus_p.png" style={{paddingTop:'60', paddingLeft:'80'}}/>
        </div>
        );
    }
}
);

//------------------------------------------------------------------------------------------------------------------------------
//Main--------------------------------------------------------------------------------------------------------------------------
//------------------------------------------------------------------------------------------------------------------------------
ReactDOM.render(<Main/>, document.getElementById('example'));