<template>
    <BsLayoutDefault ref="layout">
        <BsTab name="Focus Table" docTitle="First Tab Doc title" :docIcon="docLogo">
            <BsTabIcon>
                <img :src="firstTabIcon" alt="First Tab Icon" />
            </BsTabIcon>
            <BsHeader class="header">
                <template #content>
                    <Header :cardsItems="[
                        { 'Manual matches': headerInfo.manual },
                        { 'Pending matches': headerInfo.pending },
                    ]"></Header>
                </template>
                <template #documentation>
                    <CustomDocumentation></CustomDocumentation>
                </template>
            </BsHeader>
            <BsContent>
                <FirstTabContent 
                    @navigate-to-tab="goToTab">
                </FirstTabContent>
            </BsContent>
        </BsTab>

        <BsTab icon="rule" name="Full Table" docTitle="Second Tab doc title" :docIcon="docLogo">
            <BsTabIcon>
                <img :src="secondTabIcon" alt="Second Tab Icon" @click="loadGrid" />
            </BsTabIcon>
            <BsHeader>
                <template #content>
                    <Header :cardsItems="[
                        { 'Manual matches': headerInfo.manual },
                        { 'Pending matches': headerInfo.pending },
                    ]"></Header>
                </template>
                <template #documentation>
                    <CustomDocumentation></CustomDocumentation>
                </template>
            </BsHeader>
            <BsContent>
                <SecondTabContent 
                    :render="gridSecondTabLoaded">
                </SecondTabContent>
            </BsContent>
        </BsTab>
    </BsLayoutDefault>
</template>

<script lang="ts">
// Pinia
import { mapState, mapActions } from 'pinia';
import { useTableStore } from './stores/tableStore';

// Local Components & Assets
import docLogo from "./assets/images/doc-logo-example.svg";
import Header from "./components/Header.vue";
import FirstTabContent from "./components/FirstTabContent.vue";
import SecondTabContent from "./components/SecondTabContent.vue";
import CustomDocumentation from "./components/CustomDocumentation.vue";
import firstTabIcon from "./assets/images/first-tab-icon.svg";
import secondTabIcon from "./assets/images/second-tab-icon.svg";

// Quasar / BS
import { setCssVar } from "quasar";
import { BsLayoutDefault } from "quasar-ui-bs";
setCssVar("primary", "#2B66FF");

/**
 * This component serves as the main layout.
 * All data management is now handled by the Pinia 'table' store.
 */
export default {
    data() {
        return {
            // Local state for UI and assets
            docLogo,
            secondTabIcon,
            firstTabIcon,
            headerTitle: "Dataiku Solutions",
            headerSubtitle: "Start building your custom vue web app !",
            gridSecondTabLoaded: false,
        };
    },
    computed: {
        /** Map state/getters from the store. */
        ...mapState(useTableStore, ['fullTableData', 'loading', 'headerInfo'])
    },
    components: {
        Header,
        FirstTabContent,
        SecondTabContent,
        CustomDocumentation
    },
    methods: {
        /** Map actions from the store. */
        ...mapActions(useTableStore, ['fetchTableData', 'fetchMetadata']),

        // --- UI-specific methods ---

        /**
         * Programmatically navigate to a different tab.
         * @param {number} index Tab index to switch to.
         */
        goToTab(index: number) {
            const layout = this.$refs.layout as InstanceType<typeof BsLayoutDefault>;
            if (layout) {
                layout.tabIndex = index;
            }
        },

        /** Triggers the second tab's grid to render. */
        loadGrid() {
            this.gridSecondTabLoaded = true;
        }
    },
    /** Fetch all core data and metadata on load. */
    mounted: async function () {
        await this.fetchTableData();
        await this.fetchMetadata();
    },
};
</script>

<style>
.header .bs-font-medium-3-semi-bold {
    font-size: 20px;
}
</style>