import React from 'react';

import classNames from 'classnames';

import { formatDexNumber } from 'app/utils/formatter';

import * as styles from 'app/styles/Loading.scss';

export interface ILoadingProps {}

export class Loading extends React.Component<ILoadingProps> {

    public render() {

        const pokemonGroups = [
            [1, 2, 3],
            [4, 5, 6],
            [7, 8, 9],
            [172, 25, 26],
            [144, 145, 146],
        ];

        const pokemonIconCss = classNames(
            'icon',
            'pixel',
            'sprite',
        );

        const groupIndex = Math.floor(Math.random() * pokemonGroups.length);
        const pokemonIcons =  pokemonGroups[groupIndex].map((dex) => {
            const pokemonCss = classNames(
                pokemonIconCss,
                `pokemon-${ formatDexNumber(dex) }`,
            );
            return <div key={ dex } className={ pokemonCss } />;
        });

        return (
            <div className={ styles.wrapper }>
                { pokemonIcons }
            </div>
        );
    }
}