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

import InitialsCtrl from '../../controllers/high-score/initials.controller';

let listener;

export class Initials extends Component {
    componentDidMount() {
        InitialsCtrl.setDispatch(this.props.dispatch);
        InitialsCtrl.update();

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

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

    render() {
        if (this.props.initials.length === 0) {
            return <div className='initials'></div>;
        }

        const class1 = ['initial'];
        const class2 = ['initial'];
        const class3 = ['initial'];

        if (this.props.initials[0].active === true) {
            class1.push('blink');
        }
        if (this.props.initials[1].active === true) {
            class2.push('blink');
        }
        if (this.props.initials[2].active === true) {
            class3.push('blink');
        }

        return (
            <div className='initials'>
                <div className={class1.join(' ')}>{this.props.initials[0].initial}</div>
                <div className={class2.join(' ')}>{this.props.initials[1].initial}</div>
                <div className={class3.join(' ')}>{this.props.initials[2].initial}</div>
            </div>
        );
    };
};

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

export default connect(select)(Initials);