module TK.SpaceTac.UI {
    export enum CharacterSheetMode {
        CREATION,
        EDITION,
        DISPLAY
    }

    /**
     * Character sheet, displaying ship characteristics
     */
    export class CharacterSheet {
        // Global sheet mode
        mode: CharacterSheetMode

        // Parent view
        view: BaseView

        // UI components builder
        container: UIContainer
        builder: UIBuilder

        // Close/validate button
        close_button: UIButton

        // X positions
        xshown = 0
        xhidden = -2000

        // Groups
        group_level: UIContainer
        group_portraits: UIContainer
        group_attributes: UIContainer
        group_actions: UIContainer
        group_upgrades: UIContainer

        // Currently displayed fleet
        fleet?: Fleet

        // Currently displayed ship
        ship?: Ship

        // Variable data
        personality?: CharacterPersonality
        image_portrait: UIImage
        text_model: UIText
        text_description: UIText
        text_name?: UIText
        text_level: UIText
        text_upgrade_points: UIText
        valuebar_experience: ValueBar

        constructor(view: BaseView, mode: CharacterSheetMode, onclose?: Function) {
            this.view = view;
            this.mode = mode;

            let builder = new UIBuilder(view);
            this.container = builder.container("character-sheet");

            builder = builder.in(this.container);
            let bg = builder.image("character-sheet");
            bg.setInteractive();

            this.builder = builder.styled({ color: "#dce9f9", size: 16, shadow: true });


            if (!onclose) {
                onclose = () => this.hide();
            }

            this.xhidden = -this.view.getWidth();
            this.container.x = this.xhidden;

            this.image_portrait = this.builder.image("common-transparent", 435, 271, true);

            this.builder.image("character-entry", 24, 740);

            this.group_portraits = this.builder.container("portraits", 90, 755);

            let model_bg = this.builder.image("character-ship-model", 434, 500, true);
            this.text_model = this.builder.in(model_bg).text("", 0, 0, { size: 28 });

            let description_bg = this.builder.image("character-ship-description", 434, 654, true);
            this.text_description = this.builder.in(description_bg).text("", 0, 0, { color: "#a0afc3", width: 510 });

            this.group_attributes = this.builder.container("attributes", 28, 28);
            this.group_actions = this.builder.container("actions", 698, 28);

            this.group_level = this.builder.container("level");
            let points_bg = this.builder.in(this.group_level).image("character-level-upgrades", 582, 986);
            this.builder.in(points_bg, builder => {
                builder.text("Upgrade points", 46, 10, { center: false, vcenter: false });
                builder.image("character-upgrade-point", 147, 59, true);
            });
            this.text_upgrade_points = this.builder.in(points_bg).text("", 106, 60, { size: 28 });

            let level_bg = this.builder.in(this.group_level).image("character-level-display", 434, 1032, true);
            this.text_level = this.builder.in(level_bg).text("", 0, 4, { size: 28 });
            this.valuebar_experience = this.builder.in(level_bg).valuebar("character-level-experience", -level_bg.width * 0.5, -level_bg.height * 0.5);

            this.group_upgrades = this.builder.container("upgrades");

            if (this.mode == CharacterSheetMode.CREATION) {
                this.builder.in(this.builder.image("character-section-title", 180, 30, false)).text("Ship", 80, 45, { color: "#dce9f9", size: 32 });

                this.personality = new CharacterPersonality(this.builder, 950, 30);

                this.close_button = this.builder.button("character-validate-creation", 140, 930, onclose,
                    "Validate the team, and start the campaign", undefined, {
                        hover_bottom: true,
                        text: "Validate team",
                        text_x: 295,
                        text_y: 57,
                        text_style: { size: 32, color: "#fff3df" }
                    }
                );

                this.builder.in(this.builder.image("character-creation-help", 970, 680), builder => {
                    builder.text("Compose your initial team by choosing a model for each ship, and customize the name and personality of the Artificial Intelligence pilot",
                        405, 150, { color: "#a3bbd9", size: 22, width: 500 });
                });

                this.builder.button("character-model-prev", 216, 500, () => this.changeModel(-1), "Select previous model", undefined, { center: true });
                this.builder.button("character-model-next", 654, 500, () => this.changeModel(1), "Select next model", undefined, { center: true });

                this.group_level.visible = false;
                this.group_upgrades.visible = false;
            } else {
                this.text_name = this.builder.in(this.builder.image("character-name-display", 434, 940, true)).text("", 0, 0, { size: 28 });

                this.close_button = this.builder.button("character-close-button", 1837, 0, onclose, "Close the character sheet");
            }

            this.refreshUpgrades();
            this.refreshAttributes();
            this.refreshActions();
        }

        /**
         * Move the sheet to a specific layer
         */
        moveToLayer(layer: UIContainer): void {
            layer.add(this.container);
        }

        /**
         * Check if the sheet should be interactive
         */
        isInteractive(): boolean {
            return this.ship ? (this.mode != CharacterSheetMode.DISPLAY && !this.ship.critical) : false;
        }

        /**
         * Change the ship model
         */
        changeModel(offset: number): void {
            if (this.mode == CharacterSheetMode.CREATION && this.ship) {
                let models = ShipModel.getDefaultCollection();

                let idx = models.map(model => model.code).indexOf(this.ship.model.code) + offset;
                if (idx < 0) {
                    idx = models.length - 1;
                } else if (idx >= models.length) {
                    idx = 0;
                }

                this.ship.setModel(models[idx]);
                this.refresh();
            }
        }

        /**
         * Refresh the ship information display
         */
        private refreshShipInfo(): void {
            if (this.ship) {
                let ship = this.ship;
                this.builder.change(this.image_portrait, `ship-${ship.model.code}-portrait`);
                if (this.text_name) {
                    this.text_name.setText(ship.name || "");
                }
                if (this.personality) {
                    this.personality.displayShip(ship);
                }
                this.text_model.setText(ship.model.name);
                this.text_level.setText(`Level ${ship.level.get()}`);
                this.text_description.setText(ship.model.getDescription());
                this.text_upgrade_points.setText(`${ship.getAvailableUpgradePoints()}`);
                this.valuebar_experience.setValue(ship.level.getExperience(), ship.level.getNextGoal());
            }
        }

        /**
         * Refresh the upgrades display
         */
        private refreshUpgrades(): void {
            let builder = this.builder.in(this.group_upgrades);
            builder.clear();

            if (!this.ship || this.mode == CharacterSheetMode.CREATION) {
                return;
            }
            let ship = this.ship;

            let initial = builder.image("character-initial", 970, 30);

            // Base equipment (level 1)
            builder.styled({ center: false, vcenter: false }).in(initial, builder => {
                builder.text("Base equipment", 32, 8, { color: "#e2e9d1" });

                builder.in(builder.container("attributes"), builder => {
                    let effects = cfilter(ship.model.getEffects(1, []), AttributeEffect);
                    effects.forEach(effect => {
                        let button = builder.button(`attribute-${effect.attrcode}`, 0, 8, undefined,
                            `${capitalize(SHIP_VALUES_NAMES[effect.attrcode])} - ${SHIP_VALUES_DESCRIPTIONS[effect.attrcode]}`);

                        builder.in(button, builder => {
                            builder.text(`${effect.value}`, 56, 8, { size: 22 });
                        });
                    });
                    builder.distribute("x", 236, 870);
                });

                builder.in(builder.container("actions"), builder => {
                    let actions = ship.model.getActions(1, []);
                    actions.forEach(action => {
                        let button = builder.button("common-transparent", 0, 66, undefined, action.getEffectsDescription());

                        builder.in(button, builder => {
                            let icon = builder.image(`action-${action.code}`);
                            icon.setScale(0.1875);
                            if (actions.length < 5) {
                                builder.text(`${action.name}`, 56, 12, { size: 16 });
                            }
                        });
                    });
                    builder.distribute("x", 28, 888);
                });
            });

            // Level number
            range(10).forEach(i => {
                builder.text(`${i + 1}`, 920, i == 0 ? 92 : (110 + i * 100), {
                    center: true,
                    vcenter: true,
                    size: 28,
                    color: ship.level.get() >= (i + 1) ? "#dce9f9" : "#293038"
                });
            });

            // Level upgrades
            range(9).forEach(i => {
                builder.image("character-level-separator", 844, 154 + i * 100);

                let level = i + 2;
                let upgrades = ship.model.getLevelUpgrades(level);
                upgrades.forEach((upgrade, j) => {
                    let onchange = (selected: boolean) => {
                        this.refreshShipInfo();  // TODO Only upgrade points
                        this.refreshActions();
                        this.refreshAttributes();
                    };
                    new CharacterUpgrade(ship, upgrade, level).draw(builder, 970 + j * 315, 170 + i * 100,
                        this.isInteractive() ? onchange : undefined);
                });
            });
        }

        /**
         * Refresh the attributes display
         */
        private refreshAttributes(): void {
            let builder = this.builder.in(this.group_attributes);
            builder.clear();

            builder.image("character-ship-column-left", 0, 0);

            builder.text("Attributes", 74, 20, { color: "#a3bbd9" });

            if (this.ship) {
                let ship = this.ship;
                builder.in(builder.container("items"), builder => {
                    keys(SHIP_ATTRIBUTES).forEach(attribute => {
                        let button = builder.button(`attribute-${attribute}`, 24, 0, undefined,
                            ship.getAttributeDescription(attribute));

                        builder.in(button).text(`${ship.getAttribute(attribute)}`, 78, 27, { size: 22 });
                    });
                    builder.distribute("y", 40, 688);
                });
            }
        }

        /**
         * Refresh the actions display
         */
        private refreshActions(): void {
            let builder = this.builder.in(this.group_actions);
            builder.clear();

            builder.image("character-ship-column-right", 0, 0);

            builder.text("Actions", 74, 20, { color: "#a3bbd9" });

            if (this.ship) {
                let ship = this.ship;
                builder.in(builder.container("items"), builder => {
                    let actions = ship.actions.listAll().filter(action => !(action instanceof EndTurnAction));
                    actions.forEach(action => {
                        let button = builder.button(`action-${action.code}`, 24, 0, undefined, filler => ActionTooltip.fill(filler, ship, action));
                        button.setScale(0.375);
                    });
                    builder.distribute("y", 40, 688);
                });
            }
        }

        /**
         * Refresh the fleet display
         */
        private refreshFleet(): void {
            destroyChildren(this.group_portraits);

            if (this.fleet) {
                let builder = this.builder.in(this.group_portraits);
                this.fleet.ships.forEach((ship, idx) => {
                    let button: UIButton;
                    button = new CharacterPortrait(ship).draw(builder, 64 + idx * 140, 64, () => {
                        if (button) {
                            button.toggle(true, UIButtonUnicity.EXCLUSIVE_MIN);
                            this.ship = ship;

                            this.refreshShipInfo();
                            this.refreshActions();
                            this.refreshAttributes();
                            this.refreshUpgrades();
                        }
                    });

                    if (ship == this.ship) {
                        button.toggle(true);
                    }
                });
            }
        }

        /**
         * Check if the sheet is shown
         */
        isOpened(): boolean {
            return this.container.x != this.xhidden;
        }

        /**
         * Show the sheet for a given ship
         */
        show(ship: Ship, animate = true, sound = true) {
            this.ship = ship;
            this.fleet = ship.fleet;

            this.refreshShipInfo();
            this.refreshUpgrades();
            this.refreshAttributes();
            this.refreshActions();

            if (ship.fleet !== this.fleet || ship.fleet.ships.length != this.group_portraits.length) {
                this.refreshFleet();
            }

            if (sound) {
                this.view.audio.playOnce("ui-dialog-open");
            }

            if (animate) {
                this.view.tweens.add({
                    targets: this.container,
                    x: this.xshown,
                    duration: 400,
                    easing: 'Circ.easeInOut'
                });
            } else {
                this.container.x = this.xshown;
            }
        }

        /**
         * Hide the sheet
         */
        hide(animate = true) {
            this.view.audio.playOnce("ui-dialog-close");

            if (animate) {
                this.view.tweens.add({
                    targets: this.container,
                    x: this.xhidden,
                    duration: 400,
                    ease: 'Circ.easeInOut'
                });
            } else {
                this.container.x = this.xhidden;
            }
        }

        /**
         * Refresh the sheet display
         */
        refresh() {
            if (this.ship) {
                this.refreshShipInfo();
                this.refreshUpgrades();
                this.refreshAttributes();
                this.refreshActions();

                this.refreshFleet();
            }
        }
    }
}