require('../../sass/welcome/welcome.scss');

import { Component } from 'react';
import { connect } from 'react-redux';

import WelcomeCtrl from  '../../controllers/welcome/welcome.controller';
import HofRow from '../../components/welcome/hof-row.component';
let listener;

export class Welcome extends Component {
    componentDidMount() {
        WelcomeCtrl.setDispatch(this.props.dispatch);
        WelcomeCtrl.updateFromLocalStorage();

        listener = WelcomeCtrl.keydown.bind(WelcomeCtrl);
        window.addEventListener('keydown', listener);
    };

    componentWillUnmount() {
        window.removeEventListener('keydown', listener);
    };

    render() {
        const entries = [];
        this.props.scores.map(function(v, i) {
            entries.push(<HofRow initials={v.initials} score={v.score} rank={i + 1} key={i} />);
        });

        return (
            <div className='welcome'>
                <img src="res/title.png" />
                <div className='line blink'>Press Spacebar for new game</div>
                <hr />
                {entries}
            </div>
        );
    };
};

const select = (state) => {
    return state.welcome;
};

export default connect(select)(Welcome);