<template>
    <ion-page>
        <ion-tabs @ionTabsDidChange="tabChange">
            <ion-router-outlet></ion-router-outlet>
            <ion-tab-bar slot="bottom" translucent>
                <ion-tab-button tab="home" href="/tabs/home" color="tertiary">
                    <ion-icon
                        aria-hidden="true"
                        :icon="IconTabHomePre"
                        v-if="activeTab == 'home'"
                    />
                    <ion-icon aria-hidden="true" :icon="IconTabHome" v-else />
                    <ion-label>Home</ion-label>
                </ion-tab-button>

                <!-- <ion-tab-button tab="forYou" href="/tabs/forYou">
                    <ion-icon
                        aria-hidden="true"
                        :icon="IconTabPlayPre"
                        v-if="activeTab == 'forYou'"
                    />
                    <ion-icon aria-hidden="true" :icon="IconTabPlay" v-else />
                    <ion-label>For You</ion-label>
                </ion-tab-button> -->

                <ion-tab-button tab="myList" href="/tabs/myList">
                    <ion-icon
                        aria-hidden="true"
                        :icon="IconTabListPre"
                        v-if="activeTab == 'myList'"
                    />
                    <ion-icon aria-hidden="true" :icon="IconTabList" v-else />
                    <ion-label>My List</ion-label>
                </ion-tab-button>

                <ion-tab-button tab="me" href="/tabs/me">
                    <ion-icon
                        aria-hidden="true"
                        :icon="IconTabMePre"
                        v-if="activeTab == 'me'"
                    />
                    <ion-icon aria-hidden="true" :icon="IconTabMe" v-else />
                    <ion-label>Me</ion-label>
                </ion-tab-button>
            </ion-tab-bar>
        </ion-tabs>
    </ion-page>
</template>

<script setup lang="ts">
import {
    IonTabBar,
    IonTabButton,
    IonTabs,
    IonLabel,
    IonIcon,
    IonPage,
    IonRouterOutlet,
} from "@ionic/vue";
import IconTabHome from "@/assets/icon_tab_home.svg";
import IconTabHomePre from "@/assets/icon_tab_home_pre.svg";
import IconTabPlay from "@/assets/icon_tab_play.svg";
import IconTabPlayPre from "@/assets/icon_tab_play_pre.svg";
import IconTabList from "@/assets/icon_tab_list.svg";
import IconTabListPre from "@/assets/icon_tab_list_pre.svg";
import IconTabMe from "@/assets/icon_tab_me.svg";
import IconTabMePre from "@/assets/icon_tab_me_pre.svg";

import { ref } from "vue";
const activeTab = ref(null);

const tabChange = (tabInfo: any) => {
    activeTab.value = tabInfo.tab;
};
</script>
<style scoped>
ion-tab-button {
    --color-selected: var(--ion-color-tertiary-shade);
}
</style>
