<template>
    <div id="misc_files_app">
        <h3>{{ titleLabel }}</h3>
        <div class="misc-files">
            <div class="misc-files-left">
                <div class="misc-files-tree-toolbar">
                    <i class="fa fa-plus-square" :title="expandAllLabel" role="button" tabindex="0" @click="expandAll" @keydown.enter="expandAll"></i>
                    <i class="fa fa-minus-square" :title="collapseAllLabel" role="button" tabindex="0" @click="collapseAll" @keydown.enter="collapseAll"></i>
                </div>
                <files-tree ref="tree" :tree="tree" :selected="selected" @file-selected="onFileSelected" @subst-file-selected="onSubstFileSelected"></files-tree>
            </div>
            <div class="misc-files-right">
                <div class="misc-files-tabs">
                    <div class="misc-files-tabs-nav" role="tablist">
                        <button
                            type="button"
                            role="tab"
                            :class="{ 'is-active': activeTab === 'settings' }"
                            @click="activeTab = 'settings'"
                        >{{ fileSettingLabel }}</button>
                        <button
                            type="button"
                            role="tab"
                            :class="{ 'is-active': activeTab === 'content' }"
                            @click="activeTab = 'content'"
                        >{{ fileSourceCodeLabel }}</button>
                    </div>
                    <div class="misc-files-tabs-panel">
                        <file-settings v-show="activeTab === 'settings'" :selected="selected" @add-substitution="onAddSubstitution"></file-settings>
                        <file-content ref="fileContent" v-show="activeTab === 'content'" :selected="selected" :active="activeTab === 'content'"></file-content>
                    </div>
                </div>
                <div class="misc-files-bottom" :class="{ 'is-expanded': substExpanded }">
                    <button
                        type="button"
                        class="misc-files-bottom-header"
                        :aria-expanded="substExpanded"
                        @click="substExpanded = !substExpanded"
                    >
                        <i class="fa" :class="substExpanded ? 'fa-chevron-down' : 'fa-chevron-right'" aria-hidden="true"></i>
                        {{ substitutionLabel }}
                    </button>
                    <div class="misc-files-bottom-panel" v-show="substExpanded">
                        <subst-file-content ref="substFileContent" :selected="selected" :active="substExpanded"></subst-file-content>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import filesTree from "./filesTree.vue";
    import fileSettings from "./fileSettings.vue";
    import fileContent from "./fileContent.vue";
    import substFileContent from "./substFileContent.vue";
    import messages from "@/common/helper/Messages.js";

    /**
     * Composant racine de l'ecran "Gestion des fichiers" (Administration > Outils).
     * Contenu ex-misc_files.html, deplace dans un vrai composant .vue compile a la
     * construction (vue-loader), pour eviter la compilation a l'execution du DOM
     * brut (via el:) qui s'est reveillee peu fiable pour les gestionnaires de clic
     * places directement dans ce template racine.
     */
    export default {
        name: "mainApp",

        components: { filesTree, fileSettings, fileContent, substFileContent },

        props: {
            tree: { type: Array, default: () => [] }
        },

        data() {
            return {
                selected: null,
                activeTab: "settings",
                substExpanded: false
            };
        },

        computed: {
            /** Libelles disponibles cote client (entry js="misc" dans messages/fr_FR.xml), sans passer par msg. */
            titleLabel() {
                return messages.get("misc", "subst_files_management");
            },
            fileSettingLabel() {
                return messages.get("misc", "file_setting");
            },
            fileSourceCodeLabel() {
                return messages.get("misc", "file_source_code");
            },
            expandAllLabel() {
                return messages.get("misc", "misc_files_expand_all");
            },
            collapseAllLabel() {
                return messages.get("misc", "misc_files_collapse_all");
            },
            substitutionLabel() {
                return messages.get("misc", "misc_files_substitution");
            }
        },

        watch: {
            /**
             * L'editeur Ace du "code source" est mis a jour meme quand cet onglet
             * est masque (v-show) -- il faut recalculer sa mise en page au moment
             * ou il redevient visible, sinon son contenu reste mal affiche.
             */
            activeTab(value) {
                if (value === "content") {
                    this.$nextTick(() => this.$refs.fileContent.resize());
                }
            },

            /** Meme besoin que activeTab, pour le volet "substitution" repliable. */
            substExpanded(value) {
                if (value) {
                    this.$nextTick(() => this.$refs.substFileContent.resize());
                }
            }
        },

        methods: {
            onFileSelected(payload) {
                this.selected = Object.assign({ event: "fileTreeSelected" }, payload);
            },
            onSubstFileSelected(payload) {
                this.selected = Object.assign({ event: "substFileTreeSelected" }, payload);
            },
            expandAll() {
                this.$refs.tree.expandAll();
            },
            collapseAll() {
                this.$refs.tree.collapseAll();
            },

            /**
             * Icone "substituer" (fileSettings.vue) : deplie le volet substitution
             * et s'assure que son contenu est charge avant d'y inserer l'entree,
             * pour ne pas ecraser l'insertion au premier chargement du volet.
             */
            onAddSubstitution(code) {
                this.substExpanded = true;
                this.$nextTick(() => {
                    this.$refs.substFileContent.ensureLoaded().then(() => {
                        this.$refs.substFileContent.insertSubstitution(code);
                    });
                });
            }
        }
    };
</script>
