module TK.SpaceTac.UI {
    type BattleInfoBarConfig = {
        showOptions: Function
        startResolution: Function
    }

    export enum BattleInfoBarPhase {
        PLANNING
    }

    /**
     * Bar displaying info on battle phase
     */
    export class BattleInfoBar {
        private container: UIContainer
        private title: UIText
        private planning: BattleInfoBarPlanning

        constructor(private builder: UIBuilder, private config: Partial<BattleInfoBarConfig> = {}) {
            this.container = builder.container("infobar", 960, 1030);

            builder.in(this.container, builder => {
                builder.image("battle-infobar-background", 0, 0, true);
                builder.button("battle-infobar-options", -474, 0, config.showOptions, "Game options", undefined, { center: true });
            });

            this.title = builder.in(this.container).text("Battle", 0, 0, { center: true, size: 30, shadow: true, color: "#dbeff9" });

            this.planning = new BattleInfoBarPlanning(this.container, config.startResolution);
        }

        setPhase(turn: number, phase: BattleInfoBarPhase): void {
            switch (phase) {
                case BattleInfoBarPhase.PLANNING:
                    this.container.getBuilder().change(this.title, "Planning phase");
            }

            this.planning.setCurrentTurn(turn);
            this.planning.setVisible(phase == BattleInfoBarPhase.PLANNING);
        }
    }

    /**
     * Planning phase buttons, with turn counter and "ready" button
     */
    class BattleInfoBarPlanning {
        container: UIContainer
        turns: UIText

        constructor(parent: UIContainer, startResolution?: Function) {
            this.container = parent.getBuilder().container("planning", 0, 0, false);
            const builder = this.container.getBuilder();

            if (startResolution) {
                builder.button("battle-buttons-medium", 604, 0, startResolution, "Confirm your planning and start the turn resolution", undefined, {
                    center: true,
                    text: "Ready",
                    text_x: 12,
                    text_style: { size: 24, color: "#9fc4d6" }
                });
            }

            builder.image("battle-infobar-turncounter", 450, 0, true);
            this.turns = builder.text("Turn", 450, 0, { center: true, size: 24, color: "#9fc4d6" });
        }

        setCurrentTurn(num: number): void {
            this.container.getBuilder().change(this.turns, `Turn ${num}`);
        }

        setVisible(visible: boolean): void {
            this.container.setVisible(visible);
        }
    }
}