import React from 'react';

import classNames from 'classnames';

import { League, LeagueLabels } from 'app/models/League';

import * as styles from './styles/LeagueSelector.scss';

export interface ILeagueSelectorProps {
    activeLeague : League;
    handleLeagueSelect : (league : League) => void;
}

export class LeagueSelector extends React.Component<ILeagueSelectorProps, object> {

    public render() {
        const { activeLeague } = this.props;

        const css = classNames(
        );

        return (
            <div className={ styles.wrapper }>
                {
                    LeagueLabels.map((league, index) => {
                        const buttonCss = classNames(
                            'nes-btn',
                            {
                                [ styles.greatLeagueButton ]: league.id === 'great',
                                [ styles.ultraLeagueButton ]: league.id === 'ultra',
                                [ styles.masterLeagueButton ]: league.id === 'master',
                                [ styles.customLeagueButton ]: league.id === 'custom',
                                [ styles.active ]: activeLeague === league.id,
                            }
                        );
                        return <button
                            key={ league.id + index }
                            className={ buttonCss }
                            onClick={ this.handleLeagueSelectFactory(league.id) }
                        >
                            { league.label }
                        </button>;
                    })
                }
            </div>
        );
    }

    private readonly handleLeagueSelectFactory = (league : League) => {
        return () => {
            this.props.handleLeagueSelect(league);
        };
    }
}
