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

import { Component } from 'react';
import { connect } from 'react-redux';
import Initials from './initials.component';

import * as ModeActions from '../../actions/mode.actions';
import WelcomeCtrl from  '../../controllers/welcome/welcome.controller';

let listener;

export class Welcome extends Component {
    componentDidMount() {
        listener = WelcomeCtrl.keydown.bind(WelcomeCtrl);
        window.addEventListener('keydown', listener);

    //     HighScoreCtrl.setDispatch(this.props.dispatch);
    //     HighScoreCtrl.retrieveScores();
    //     HighScoreCtrl.updateScores(ScorebarCtrl.currentScore);
    };

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

    render() {
        // var entries = [];
        // this.props.values.map(function(v, i) {
        //     entries.push(<HighScoreEntry initials={v.initials} score={v.score} rank={v.rank} key={i} />);
        // });

        return (
            <div className='welcome'>
                <img src="res/title.png" />
                <div className='line'>Press Spacebar for new game</div>
                <div className='line'>New high score!</div>
                <div className='line'>Enter your initials:</div>
                <Initials />
            </div>
        );
    };
};

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

export default connect(select)(Welcome);