//Main
export default class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            smiles: [
                { id: 1, smile: '😜', count: 0 },
                { id: 2, smile: '😈', count: 0 },
                { id: 3, smile: '🚀', count: 0 },
                { id: 4, smile: '😎', count: 0 },
                { id: 5, smile: '😶', count: 0 },
            ]
        }
        this.state = {
            vote1: 0,
            vote2: 0,
            vote3: 0,
            vote4: 0,
            vote5: 0,
        }
        this.increaseVote = this.increaseVote.bind(this);
        this.checkWinner = this.checkWinner.bind(this);
    }
    increaseVote(id) {
        this.setState(state => {
            return {
                [id]: state[id] + 1
            }
        })
    }
    checkWinner() {
        const winner = Math.max(...Object.values(this.state))
        console.log('winner: ', winner)
        this.setState( {
            winner
        })
    }
  render() {
    return (
        <Wrapper>
          <List>
            <Item text="&#128540;" id="vote1" increaseVote={this.increaseVote} state={this.state}/>
            <Item text="&#128520;" id="vote2" increaseVote={this.increaseVote} state={this.state}/>
            <Item text="&#128640;" id="vote3" increaseVote={this.increaseVote} state={this.state}/>
            <Item text="&#128526;" id="vote4" increaseVote={this.increaseVote} state={this.state}/>
            <Item text="&#128566;" id="vote5" increaseVote={this.increaseVote} state={this.state}/>
          </List>
          <ButtonResult checkWinner={this.checkWinner} />
          <Winner winner={this.state.winner}/>
        </Wrapper>
    )
  }
}
//Winner
export default class Winner extends React.Component {
    render() {
        const { winner } = this.props;
        return (
            <div className="block-winner">{winner}</div>
        )
    }
}
//Item
export default class Item extends React.Component {
    render() {
        const { id, text, state, increaseVote } = this.props;
        const onClick = () => increaseVote(id);
        return (
            <li>
                <ButtonSmile onClick={onClick} id={id} text={text}/>
                <Count text={state[id]}/>
            </li>
        )
    }
}
//ButtonResult
export default class ButtonResult extends React.Component {
    render() {
        const { checkWinner } = this.props;
        return (
            <button onClick={checkWinner}  className="button-result">Result</button>
        )
    }
}
//ButtonSmile
export default class ButtonSmile extends React.Component {
    render() {
            const { id, text, onClick } = this.props;
        return (
            <button onClick={onClick} className="button" id={id}>{text}</button>
        )
    }
}
//Count
export default class Count extends React.Component {
    render() {
        const { text } = this.props;
        return (
            <p className="count-click">{text}</p>
        )
    }
}
//List
export default class List extends React.Component {
    render() {
        return (
            <ul className="list-buttons" id="listButtons">{this.props.children}</ul>
        )
    }
}

//Wrapper.js
export default class Wrapper extends React.Component {
    render() {
        return (
            <div className="wrapper">{this.props.children}</div>
        )
    }
}