import React from 'react';

import classNames from 'classnames';

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

import { ITypeCoverage } 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>;
    handleToggleDropdownOpen : (isOpen : boolean) => void;
    handleChangeTypeCoverage : (typeCoverage : ITypeCoverage) => void;
}

interface IState {
    quickMove : IPokemonMove | null;
    chargeMove1 : IPokemonMove | null;
    chargeMove2 : IPokemonMove | null;
}

export class MovesExplorer extends React.Component<IMovesExplorerProps, IState> {

    constructor(props : IMovesExplorerProps) {
        super(props);

        this.state = {
            quickMove: null,
            chargeMove1: null,
            chargeMove2: null,
        };
    }

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

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

        const quickMoveType = this.getMoveType(quickMove);
        const chargeMove1Type = this.getMoveType(chargeMove1);
        const chargeMove2Type = this.getMoveType(chargeMove2);

        return (
            <div className={ wrapperCss }>
                <MovesDropdown
                    movesById={ movesById }
                    selectedMove={ quickMove }
                    options={ quickMoves }
                    handleToggleOpen={ handleToggleDropdownOpen }
                    handleChangeSelectedOption={ this.handleChangeQuickMove }
                />
                { quickMove && quickMoveType &&
                    <TypeIndicator type={ quickMoveType } />
                }
                <MovesDropdown
                    movesById={ movesById }
                    selectedMove={ chargeMove1 }
                    options={ chargeMoves }
                    handleToggleOpen={ handleToggleDropdownOpen }
                    handleChangeSelectedOption={ this.handleChangeChargeMove1 }
                />
                { chargeMove1 && chargeMove1Type &&
                    <TypeIndicator type={ chargeMove1Type } />
                }
                <MovesDropdown
                    movesById={ movesById }
                    selectedMove={ chargeMove2 }
                    options={ chargeMoves }
                    handleToggleOpen={ handleToggleDropdownOpen }
                    handleChangeSelectedOption={ this.handleChangeChargeMove2 }
                />
                { chargeMove2 && chargeMove2Type &&
                    <TypeIndicator type={ chargeMove2Type } />
                }
            </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 handleChangeQuickMove = (option : IPokemonMove) => {
        const {
            chargeMove1,
            chargeMove2,
        } = this.state;
        this.setState({
            quickMove: option,
        });
        this.props.handleChangeTypeCoverage({
            type1: this.getMoveType(option),
            type2: this.getMoveType(chargeMove1),
            type3: this.getMoveType(chargeMove2),
        });
    }

    private readonly handleChangeChargeMove1 = (option : IPokemonMove) => {
        const {
            quickMove,
            chargeMove2,
        } = this.state;
        this.setState({
            chargeMove1: option,
        });
        this.props.handleChangeTypeCoverage({
            type1: this.getMoveType(quickMove),
            type2: this.getMoveType(option),
            type3: this.getMoveType(chargeMove2),
        });
    }

    private readonly handleChangeChargeMove2 = (option : IPokemonMove) => {
        const {
            quickMove,
            chargeMove1,
        } = this.state;
        this.setState({
            chargeMove2: option,
        });
        this.props.handleChangeTypeCoverage({
            type1: this.getMoveType(quickMove),
            type2: this.getMoveType(chargeMove1),
            type3: this.getMoveType(option),
        });
    }
}