require('../../sass/high-score/high-score.scss');

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

import * as ModeActions from '../../actions/mode.actions';
import HighScoreCtrl from  '../../controllers/high-score/high-score.controller';

let listener;

export class Welcome extends Component {
    componentDidMount() {
        listener = HighScoreCtrl.keydown.bind(HighScoreCtrl);
        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(<HofRow initials={v.initials} score={v.score} rank={v.rank} key={i} />);
        // });

        if (WelcomeCtrl.isHighScore() > 0) {
            return (
                <div className='welcome'>
                    <img src="res/title.png" />
                    <div className='spacer'></div>
                    <div className='line'>New high score!</div>
                    <div className='line'>Enter your initials:</div>
                    <Initials />
                </div>
            );
        }
        else {
            return (
                <div className='welcome'>
                    <img src="res/title.png" />
                    <div className='line'>Press Spacebar for new game</div>
                    high scores here
                </div>
            );
        }


    };
};

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

export default connect(select)(Welcome);