let  personID = 0;
class Person extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      heirs : 0,
      percent : this.props.percent
    };
  }
  addPerson(x){
    let nextGen = parseInt(this.props.generation) + 1;
    let nextPerson = this.props.number+ "_" + x;
    return(<Person key={x} number={nextPerson} generation={nextGen} percent={getPercentage(nextPerson)}/>);
  }
  handleChange(e) {
    updatePercentage(this.props.number,e)
    this.setState({percent: getPercentage(this.props.number)});
  }
  render(){
    let heirs = []
    for(let i=1;i<=this.state.heirs;i++){
      heirs.push(i)
    }
    let gen = this.props.number;
    return(
      <div className='person'>
        <div className='row'>
          <h3>Άτομο n({gen})</h3>
        </div>
        <div className='row'>
          <input type="text" defaultValue={this.props.percent}  placeholder='Ποσοστό' onChange={(e) => this.handleChange(e.target.value)}  />     <span className='finalPercent'>{this.props.percent}</span>
        </div>
        <div className='row'>
          <input type="number" name={"heirs_" + this.props.number} onBlur={(e) => this.setState({heirs:e.target.value})} placeholder='heirs'/>
        </div>
        <div className='row'>
          {
            heirs.map ( (n) => {
                return this.addPerson(n)
            })

        }
        </div>
      </div>
    );
  }
}
function updatePercentage(key,value){
  if(typeof this.state.percentages[key] != "undefined"){
    this.state.percentages[key] = value;    
  }else{
    this.setState({percentages: Object.assign( {}, this.state.percentages, { [key] : value })} );    
  }
    console.log(this.state.percentages);
}
function getPercentage(key){
  if(typeof this.state.percentages[key] != "undefined"){
    return this.state.percentages[key];    
  }else{
    return '0';  
  }
  
}
class App extends React.Component {
  constructor(props){
    super(props);
    this.state =  {
      percentages : {1:"1/1"}
    };
    updatePercentage = updatePercentage.bind(this); 
    getPercentage = getPercentage.bind(this);
    this.calculate = this.calculate.bind(this);
  }
  calculate(){
    let toLCM = new Array();
    let gcd = (a, b) => a ? gcd(b % a, a) : b;
    let lcm = (a, b) => a * b / gcd(a, b);
    Object.keys(this.state.percentages).forEach(key => {
        let splitted = this.state.percentages[key].split("/"); 
        toLCM.push(splitted[1]);   // the value of the current key.
    });
    let newLCM = toLCM.reduce(lcm);
    let key = '';
    let percent = this.state.percentages;
    Object.keys(this.state.percentages).forEach(key => {
        let splitted = this.state.percentages[key].split("/"); 
        let toMulti = newLCM/math.number(splitted[1]);
        let newValeu = math.number(splitted[0])*toMulti+'/'+math.number(splitted[1])*toMulti;
        percent[key] = newValeu;
    });
    this.setState({percentages : percent}); 
    console.log(this.state.percentages);
  } 
  render() {
   
    
    return (
      <div className="generation">
        <h1>Κληρονομιά μεριδίων</h1>
        <div className='people'>
          <Person generation='1' number='1' percent={this.state.percentages[1]}/>
        </div>
        <div className='row'>
          <button onClick={this.calculate} className='btn'>Υπολογισμός</button>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <App />,
  document.getElementById('root')
);