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

import { Component } from 'react';
import { connect } from 'react-redux';
import OptionsCtrl from '../../controllers/options/options.controller';
import ModeCtrl from '../../controllers/mode.controller';
import Option from './option.component';

let listener;

export default class Options extends Component {
    componentDidMount() {
        OptionsCtrl.setDispatch(this.props.dispatch);
        ModeCtrl.setDispatch(this.props.dispatch);

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

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

    render() {
        const optionsElements = [];

        OptionsCtrl.getValues().map((v, i) => {
            optionsElements.push(<Option value={v} selected={this.props.selected === i} key={i} />);
        });

        return (
            <div className='options'>
                <div className='line'>Which game would you like to play?</div>
                <hr />
                <div className='line'>Use the arrow keys to move.</div>
                <div className='line'>Press spacebar to select.</div>
                <hr />
                {optionsElements}
            </div>
        );
    };
};

const select = (state) => {
    return {
        selected: state.options
    };
};

export default connect(select)(Options);