pvpokemon/src/ts/app/components/MovesExplorer.tsx

import React from 'react';

import classNames from 'classnames';

import { AttackTypeEffectiveness } from 'app/models/Config';
import { CombatMoveStats, ICombatMoveStats, IPokemonMove } from 'app/models/Pokemon';

import { CombatMoveSelectorsOpen, SelectedCombatMoves } from 'app/types';

import { MovesDropdown } from 'app/components/MovesDropdown';
import { TypeIndicator } from './TypeIndicator';

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

export interface IMovesExplorerProps {
    movesById : CombatMoveStats;
    quickMoves : Array<IPokemonMove>;
    chargeMoves : Array<IPokemonMove>;
    selectedMoves : {
        quickMove : IPokemonMove | null;
        chargeMove1 : IPokemonMove | null;
        chargeMove2 : IPokemonMove | null;
    };
    attackTypeEffectiveness : AttackTypeEffectiveness | null;
    combatMoveSelectorsOpen : CombatMoveSelectorsOpen;
    handleToggleDropdownOpen : (menu : keyof CombatMoveSelectorsOpen, isOpen : boolean) => void;
    handleChangeSelectedMove : (moves : SelectedCombatMoves) => void;
}

export class MovesExplorer extends React.Component<IMovesExplorerProps> {

    public render() {
        const {
            movesById,
            quickMoves,
            chargeMoves,
            combatMoveSelectorsOpen,
        } = this.props;
        const {
            quickMove,
            chargeMove1,
            chargeMove2,
        } = this.props.selectedMoves;

        const wrapperCss = classNames(
            'nes-container',
            styles.wrapper,
        );

        const quickMoveType = this.getMoveType(quickMove);
        const quickMoveCss = classNames({
            [styles.legacy]: quickMove ? quickMove.isLegacy : false,
        });
        const chargeMove1Type = this.getMoveType(chargeMove1);
        const chargeMove1Css = classNames({
            [styles.legacy]: chargeMove1 ? chargeMove1.isLegacy : false,
        });
        const chargeMove2Type = this.getMoveType(chargeMove2);
        const chargeMove2Css = classNames({
            [styles.legacy]: chargeMove2 ? chargeMove2.isLegacy : false,
        });

        return (
            <div className={ wrapperCss }>
                <MovesDropdown
                    menuLabel="Quick Move"
                    isMenuOpen={ combatMoveSelectorsOpen.quickMove }
                    movesById={ movesById }
                    selectedMove={ quickMove }
                    options={ quickMoves }
                    handleToggleOpen={ this.handleToggleQuickMoveMenu }
                    handleChangeSelectedOption={ this.handleChangeQuickMove }
                />
                { quickMove && quickMoveType &&
                    <TypeIndicator className={ quickMoveCss } type={ quickMoveType } />
                }
                <MovesDropdown
                    isMenuOpen={ combatMoveSelectorsOpen.chargeMove1 }
                    menuLabel="Charge Move 1"
                    movesById={ movesById }
                    selectedMove={ chargeMove1 }
                    options={ chargeMoves }
                    handleToggleOpen={ this.handleToggleChargeMove1Menu }
                    handleChangeSelectedOption={ this.handleChangeChargeMove1 }
                />
                { chargeMove1 && chargeMove1Type &&
                    <TypeIndicator className={ chargeMove1Css } type={ chargeMove1Type } />
                }
                <MovesDropdown
                    isMenuOpen={ combatMoveSelectorsOpen.chargeMove2 }
                    menuLabel="Charge Move 2"
                    movesById={ movesById }
                    selectedMove={ chargeMove2 }
                    options={ chargeMoves }
                    handleToggleOpen={ this.handleToggleChargeMove2Menu }
                    handleChangeSelectedOption={ this.handleChangeChargeMove2 }
                />
                { chargeMove2 && chargeMove2Type &&
                    <TypeIndicator className={ chargeMove2Css } type={ chargeMove2Type } />
                }
                <div>
                    <h4>Type Coverage</h4>

                </div>
            </div>
        );
    }

    private readonly getMoveType = (move : IPokemonMove | null) => {
        let moveStats : ICombatMoveStats | null = null;
        if (move !== null) {
            moveStats = this.props.movesById.get(move.id) || null;
        }
        if (moveStats !== null) {
            return moveStats.type;
        }
        return null;
    }

    private readonly handleToggleQuickMoveMenu = (isOpen : boolean) => {
        this.props.handleToggleDropdownOpen('quickMove', isOpen);
    }

    private readonly handleChangeQuickMove = (option : IPokemonMove) => {
        this.props.handleChangeSelectedMove({
            ...this.props.selectedMoves,
            quickMove: option,
        });
    }

    private readonly handleToggleChargeMove1Menu = (isOpen : boolean) => {
        this.props.handleToggleDropdownOpen('chargeMove1', isOpen);
    }

    private readonly handleChangeChargeMove1 = (option : IPokemonMove) => {
        this.props.handleChangeSelectedMove({
            ...this.props.selectedMoves,
            chargeMove1: option,
        });
    }

    private readonly handleToggleChargeMove2Menu = (isOpen : boolean) => {
        this.props.handleToggleDropdownOpen('chargeMove2', isOpen);
    }

    private readonly handleChangeChargeMove2 = (option : IPokemonMove) => {
        this.props.handleChangeSelectedMove({
            ...this.props.selectedMoves,
            chargeMove2: option,
        });
    }
}