import React from 'react';

import classNames from 'classnames';

import { IPokemon } from 'app/models/Pokemon';

import { formatDexNumber, formatForm, Forms } from 'app/utils/formatter';

import { StatDisplay } from './StatDisplay';
import { TypeIndicator, TypeTheme } from './TypeIndicator';

import * as PVPogoProtos from 'common/models/PvPogoProtos';

import * as styles from 'app/components/PokemonExplorer/styles/PokemonDisplay.scss';

export interface IPokemonDisplay {
    leaguePokemon : IPokemon;
    isHighlighted : boolean;
}

export class PokemonDisplay extends React.Component<IPokemonDisplay> {
    public render() {
        const {
            leaguePokemon,
            isHighlighted
        } = this.props;

        const dex = formatDexNumber(leaguePokemon.dex);

        const pokemonInfoLeftColumnCss = classNames(
            styles.pokemonInfoLeftColumn,
            {
                [styles.highlight]: isHighlighted
            }
        );

        const containerCss = classNames(
            'nes-container',
            'with-title',
        );
        const containerTitleCss = classNames(
            'title',
        );
        const baseStatsCss = classNames(
            styles.pokemonBaseStats,
            containerCss,
        );

        const pokemonIconCss = classNames(
            'icon',
            'pixel',
            'sprite',
            `pokemon-${dex}`,
            {
                'normal-form': Forms.normal.indexOf(leaguePokemon.form) > -1,
                'alola-form': Forms.alola.indexOf(leaguePokemon.form) > -1,
                'plant-form': Forms.plant.indexOf(leaguePokemon.form) > -1,
                'sandy-form': Forms.sandy.indexOf(leaguePokemon.form) > -1,
                'trash-form': Forms.trash.indexOf(leaguePokemon.form) > -1,
                'west-sea-form': Forms.westSea.indexOf(leaguePokemon.form) > -1,
                'east-sea-form': Forms.eastSea.indexOf(leaguePokemon.form) > -1,
                'frost-form': Forms.frost.indexOf(leaguePokemon.form) > -1,
                'fan-form': Forms.fan.indexOf(leaguePokemon.form) > -1,
                'mow-form': Forms.mow.indexOf(leaguePokemon.form) > -1,
                'wash-form': Forms.wash.indexOf(leaguePokemon.form) > -1,
                'heat-form': Forms.heat.indexOf(leaguePokemon.form) > -1,
                'sky-form': Forms.sky.indexOf(leaguePokemon.form) > -1,
                'land-form': Forms.land.indexOf(leaguePokemon.form) > -1,
                'overcast-form': Forms.overcast.indexOf(leaguePokemon.form) > -1,
                'sunny-form': Forms.sunny.indexOf(leaguePokemon.form) > -1,
                'rainy-form': Forms.rainy.indexOf(leaguePokemon.form) > -1,
                'snowy-form': Forms.snowy.indexOf(leaguePokemon.form) > -1,
                'attack-form': Forms.attack.indexOf(leaguePokemon.form) > -1,
                'defense-form': Forms.defense.indexOf(leaguePokemon.form) > -1,
                'speed-form': Forms.speed.indexOf(leaguePokemon.form) > -1,
                'altered-form': Forms.altered.indexOf(leaguePokemon.form) > -1,
                'origin-form': Forms.origin.indexOf(leaguePokemon.form) > -1,
                'fighting-form': Forms.fighting.indexOf(leaguePokemon.form) > -1,
                'flying-form': Forms.flying.indexOf(leaguePokemon.form) > -1,
                'poison-form': Forms.poison.indexOf(leaguePokemon.form) > -1,
                'ground-form': Forms.ground.indexOf(leaguePokemon.form) > -1,
                'rock-form': Forms.rock.indexOf(leaguePokemon.form) > -1,
                'bug-form': Forms.bug.indexOf(leaguePokemon.form) > -1,
                'ghost-form': Forms.ghost.indexOf(leaguePokemon.form) > -1,
                'steel-form': Forms.steel.indexOf(leaguePokemon.form) > -1,
                'fire-form': Forms.fire.indexOf(leaguePokemon.form) > -1,
                'water-form': Forms.water.indexOf(leaguePokemon.form) > -1,
                'grass-form': Forms.grass.indexOf(leaguePokemon.form) > -1,
                'electric-form': Forms.electric.indexOf(leaguePokemon.form) > -1,
                'psychic-form': Forms.psychic.indexOf(leaguePokemon.form) > -1,
                'ice-form': Forms.ice.indexOf(leaguePokemon.form) > -1,
                'dragon-form': Forms.dragon.indexOf(leaguePokemon.form) > -1,
                'dark-form': Forms.dark.indexOf(leaguePokemon.form) > -1,
                'fairy-form': Forms.fairy.indexOf(leaguePokemon.form) > -1,
            },
        );

        const type1 = <TypeIndicator type={ leaguePokemon.types.type1 } theme={ TypeTheme.SOLID }/>;
        let type2 : JSX.Element | null = null;
        if (leaguePokemon.types.type2) {
            type2 = <TypeIndicator type={ leaguePokemon.types.type2 } theme={ TypeTheme.SOLID }/>;
        }

        return (
            <div className={ styles.pokemonInfoWrapper }>
                <div className={ pokemonInfoLeftColumnCss }>
                    <i className={ pokemonIconCss } />
                    <h4 className={ styles.dexHeader }>No.{ dex }</h4>
                    <div className={ styles.pokemonTypeWrapper }>
                        { type1 }
                        { type2 }
                    </div>
                    { leaguePokemon.form !== PVPogoProtos.PokemonForm.FORM_UNSET &&
                        <h6 className={ styles.formHeader }>{ formatForm(leaguePokemon.form) } Form</h6>
                    }
                </div>
                <div className={ styles.pokemonInfoRightColumn }>
                    <h2 className={ styles.pokemonName }>{ leaguePokemon.name }</h2>
                    <h5>{ leaguePokemon.genus }</h5>
                    <section className={ baseStatsCss }>
                        <h3 className={ containerTitleCss }>Base Stats</h3>
                        <StatDisplay
                            statLabel={ `HP${ String.fromCharCode(160) }` }
                            statValue={ leaguePokemon.stats.baseStamina }
                            statRank={ leaguePokemon.statsRank.staminaRank }
                        />
                        <StatDisplay
                            statLabel="ATK"
                            statValue={ leaguePokemon.stats.baseAttack }
                            statRank={ leaguePokemon.statsRank.attackRank }
                        />
                        <StatDisplay
                            statLabel="DEF"
                            statValue={ leaguePokemon.stats.baseDefense }
                            statRank={ leaguePokemon.statsRank.defenseRank }
                        />
                    </section>
                </div>
            </div>
        );
    }
}