<script setup lang="ts">
import { ref, type PropType } from 'vue';
import type { TabBarItemProps } from './TabBarItem.vue';
import TabBarItem from './TabBarItem.vue';
import TabBar, { type TabBarProps } from './TabBar.vue';
import { useTheme } from '../theme/ThemeDefine';

const props = defineProps({	
  tabs: {
    type: Object as PropType<TabBarItemProps[]>,
    default: () => []
  },
  tabProps: {
    type: Object as PropType<TabBarProps>,
    default: () => ({})
  },
  firstActiveIndex: {
    type: Number,
    default: 0,
  },
  bottomSpaceHeight: {
    type: [Number,String],
    default: 100,
  },
});

defineOptions({
  options: {
    virtualHost: true,
    styleIsolation: "shared",
  }
})

const activeIndex = ref(props.firstActiveIndex);
const loadedState = ref<boolean[]>([]);

const theme = useTheme();

defineExpose({
  goTab(index: number) {
    activeIndex.value = index;
  }
})
</script>

<template>
  <view class="nana-tabbar-page">
    <view
      v-for="(t, i) in tabs" 
      v-show="activeIndex===i"
      class="nana-tabbar-page-inner"
      :key="i"
      :style="{
        paddingBottom: theme.resolveThemeSize(bottomSpaceHeight)
      }"
    >
      <slot v-if="!t.lazy || loadedState[i]" 
        name="page" 
        :key="i" 
        :text="tabs[i].text"
      />
    </view>
    <TabBar v-model:selectedTabIndex="activeIndex" xbarSpace>
      <TabBarItem 
        v-for="(t, i) in tabs" 
        :key="i"
        v-bind="t"
      />
    </TabBar>
  </view>
</template>

<style lang="scss">
.nana-tabbar-page {
  position: relative;
  width: 100%;
  height: 100vh;

  .nana-tabbar-page-inner {
    width: 100%;
    min-height: 100%;
    padding-bottom: 50px;
  }

  .nana-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
</style>