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

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

import Initials from './initials.component';
import HighScoreCtrl from  '../../controllers/high-score/high-score.controller';

let listener;

export class HighScore extends Component {
    componentDidMount() {
        HighScoreCtrl.setDispatch(this.props.dispatch);
        HighScoreCtrl.checkForHighScore();
        listener = HighScoreCtrl.keydown.bind(HighScoreCtrl);
        window.addEventListener('keydown', listener);
    };

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

    render() {
        return (
            <div className='high-score'>
                <img src="res/title.png" />
                <div className='line'>&nbsp;</div>
                <div className='line'>Congratulations!</div>
                <div className='line'>{this.props.score} is a new high score!</div>
                <div className='line'>Enter your initials:</div>
                <Initials />
            </div>
        );
    };
};

const select = (state) => {
    return {
        initials: state.highscore.initials,
        score: state.highscore.score
    }
};

export default connect(select)(HighScore);