<template>
  <HomeRedesignBase>
    <div class="minimal-home">
      <TabControl class="minimal-home-tabs" :tabs="tabs" />
    </div>
  </HomeRedesignBase>
</template>
<script lang="ts">
import { addComponentListener } from '@/core/settings'
import { TabControl } from '@/ui'
import { TabMappings } from '@/ui/tab-mapping'
import HomeRedesignBase from '../HomeRedesignBase.vue'
import { minimalHomeOptions } from './options'
import { MinimalHomeTabOption } from './types'

const tabs: TabMappings = [
  {
    name: MinimalHomeTabOption.Feeds,
    displayName: '动态',
    component: () => import('./tabs/MinimalHomeFeeds.vue').then(m => m.default),
    activeLink: 'https://t.bilibili.com/?tab=video',
  },
  {
    name: MinimalHomeTabOption.Trending,
    displayName: minimalHomeOptions.personalized ? '推荐' : '热门',
    component: () => import('./tabs/MinimalHomeTrending.vue').then(m => m.default),
    activeLink: 'https://www.bilibili.com/v/popular/all',
  },
]
export default Vue.extend({
  components: {
    HomeRedesignBase,
    TabControl,
  },
  data() {
    return {
      tabs,
    }
  },
  mounted() {
    const columnCountKey = '--minimal-home-column-count-override'
    addComponentListener('minimalHome.columnCount', (count: number) => {
      if (count > 0) {
        (this.$el as HTMLElement).style.setProperty(columnCountKey, count.toString())
      } else {
        (this.$el as HTMLElement).style.removeProperty(columnCountKey)
      }
    }, true)
  },
})
</script>
<style lang="scss">
@import 'common';

.minimal-home {
  --minimal-home-auto-card-columns: 1;
  --card-width: 600px;
  --card-height: 122px;
  @media screen and (min-width: 1080px) {
    --minimal-home-auto-card-column: 2;
  }
  @media screen and (min-width: 2520px) {
    --minimal-home-auto-card-column: 3;
  }
  --minimal-home-card-column: var(
    --minimal-home-column-count-override,
    var(--minimal-home-auto-card-column)
  );

  padding: 24px 32px;
}
</style>
