<template>
    <div class="siteMenuAdmin">
        <div class="siteMenuAdmin__header">
            <h1 class="siteMenuAdmin__title">Manage Site Menu</h1>
        </div>

        <div class="siteMenuAdmin__tabs" role="tablist">
            <button type="button" class="siteMenuAdmin__tab" :class="{ 'siteMenuAdmin__tab--active': tab === 'manage' }"
                    @click="showManage">Manage</button>
            <button type="button" class="siteMenuAdmin__tab" :class="{ 'siteMenuAdmin__tab--active': tab === 'form' }"
                    @click="showAdd">{{ formId ? 'Edit' : 'Add' }}</button>
            <button type="button" class="siteMenuAdmin__tab" :class="{ 'siteMenuAdmin__tab--active': tab === 'trash' }"
                    @click="tab = 'trash'">Restore Deleted Menu Entries</button>
        </div>

        <site-menu-list v-if="tab === 'manage'"
                        :base="base" :csrf="csrf" :parent-id="parentId"
                        @drill="onDrill" @edit="onEdit" @add="onAdd"></site-menu-list>

        <site-menu-form v-else-if="tab === 'form'"
                        :base="base" :csrf="csrf" :form-id="formId" :parent-id="parentId"
                        @saved="onSaved" @cancel="showManage"></site-menu-form>

        <site-menu-trash v-else-if="tab === 'trash'" :base="base"></site-menu-trash>
    </div>
</template>

<script>
/**
 * Site Menu admin SPA root. Owns the tab state (manage / form / trash) and the
 * current drill level; switching tabs swaps the child view in place (no page
 * reload). All data flows through the child views' JSON API calls.
 */
export default {
    name: 'site-menu-app',
    props: {
        base: { type: String, default: '/admin/site-menu' },
        csrf: { type: String, default: '' },
    },
    data() {
        return {
            tab: 'manage',
            parentId: null, // null = root
            formId: null,   // null = add
        };
    },
    methods: {
        showManage() { this.tab = 'manage'; },
        showAdd() { this.formId = null; this.tab = 'form'; },
        onDrill(id) { this.parentId = id; this.tab = 'manage'; },
        onEdit(id) { this.formId = id; this.tab = 'form'; },
        onAdd(parentId) { this.parentId = parentId; this.formId = null; this.tab = 'form'; },
        onSaved() { this.formId = null; this.tab = 'manage'; },
    },
};
</script>
