import React from 'react';

import {User} from './../static/user';

export class Student extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            username:this.camelize(props.username),
            name:props.username,
            cl:props.cl,
            img_url:'data/class/'+props.cl+'/'+props.username+'.svg',
            num:props.i,
            dis:""
        }
        
        this.onErr = this.onErr.bind(this);
        this.disappear = this.disappear.bind(this);

        User.user_arr.push(this);
    }
    camelize(str) {
        var x = str.split('_');
        for(var i in x){
            x[i] = x[i].charAt(0).toUpperCase() + x[i].slice(1);
        }
        return x.join(' ');
    }
    onErr(){
        var url = 'data/class/student.svg';
        this.setState({img_url:url});
    }
    appear(){
        this.setState({dis:""});
    }
    disappear(){
        this.setState({dis:"disappear"});
    }
    render(){
        var c = "user chosen_"+this.state.num+' '+this.state.dis;
        return (
            <div className={c}>
                <div className="user_img"><img src={this.state.img_url} onError={this.onErr} alt=""></img></div>
                <div className="username">{this.state.username}</div>
            </div>
        );
    }
}