/**
 * 视频频道，包含视频和直播
 * 视频为沉浸式,直播同新闻页面
 */
import { BottomNavDTO, TopNavDTO } from 'wdBean/Index'
import { VideoChannelDetail } from 'wdDetailPlayShortVideo/Index';
import { PageComponent } from './PageComponent';

const TAG = 'VideoChannelPage'

@Component
export struct VideoChannelPage {
  readonly MAX_LINE: number = 1;
  private groupId: number = 0
  private swiperController: SwiperController = new SwiperController()
  @Prop topNavList: TopNavDTO[]
  @Link _currentNavIndex?: number;
  @Consume barBackgroundColor: Color
  @Consume @Watch('setBarBackgroundColor') currentBottomNavInfo: BottomNavDTO // 当前底导信息
  @State @Watch('setBarBackgroundColor') currentTopNavSelectedIndex: number = 0;
  @State animationDuration: number = 0
  @State indicatorLeftMargin: number = 0
  @State indicatorWidth: number = 0
  // 传递给page的自动刷新通知
  @State autoRefresh2Page: number = 0

  aboutToAppear(): void {
    this.setBarBackgroundColor()
    console.log(TAG, 'aboutToAppear')
  }

  /**
   * 顶导、底导切换下标都到改变背景色，进入或退出沉浸式
   */
  setBarBackgroundColor() {
    if (this.currentTopNavSelectedIndex === 0 && this.currentBottomNavInfo?.name === '视频') {
      console.error('setBarBackgroundColor', '黑色')
      this.barBackgroundColor = Color.Black
    } else {
      this.barBackgroundColor = Color.White
      console.error('setBarBackgroundColor', '白色')
    }
  }

  /**
   * TODO:根据顶导配置获取颜色展示效果不对，待确认
   */
  getTopNavFontColor(item: TopNavDTO, index: number): Color | string {
    if (item.name === '视频' && this.currentBottomNavInfo.name === '视频') {
      return this.currentTopNavSelectedIndex === index ? Color.White : '#e5e0e0'
    } else {
      return this.currentTopNavSelectedIndex === index ? Color.Black : "#999999"
    }
  }

  build() {
    Stack() {
      this.pageSwiperView()
      this.topNavView()
    }
    .width('100%')
    .height('100%')
    .align(Alignment.Top)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
  }

  @Builder
  topNavView() {
    Row() {
      ForEach(this.topNavList, (item: TopNavDTO, index: number) => {
        Column() {
          Text(item.name)
            .fontSize($r('app.float.selected_text_size'))
            .fontWeight(this.currentTopNavSelectedIndex === index ? FontWeight.Bold : FontWeight.Normal)
            .fontColor(this.getTopNavFontColor(item, index))
            .padding({
              top: $r('app.float.top_tab_item_padding_top'),
              bottom: $r('app.float.top_tab_item_padding_bottom')
            })
            .maxLines(this.MAX_LINE)

          Row()
            .width(20)
            .height(3)
            .backgroundImage($r('app.media.icon_channel_active'), ImageRepeat.NoRepeat)
            .backgroundImageSize(ImageSize.Contain)
            .visibility(this.currentTopNavSelectedIndex === index ? Visibility.Visible : Visibility.Hidden)

        }
        .padding({
          left: $r('app.float.top_tab_item_padding_horizontal'),
          right: $r('app.float.top_tab_item_padding_horizontal'),
        })
        .onClick(() => {
          this.currentTopNavSelectedIndex = index
          this.swiperController.changeIndex(index, true)
        })
      }, (item: TopNavDTO) => item.channelId + '')
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor(this.currentTopNavSelectedIndex === 0 ? Color.Transparent : Color.White)
  }

  @Builder
  pageSwiperView() {
    Swiper(this.swiperController) {
      ForEach(this.topNavList, (item: TopNavDTO, index: number) => {
        if (index == 0) {
          // 视频
          VideoChannelDetail({
            bottomNavIndex: $_currentNavIndex,
            topNavIndex: $currentTopNavSelectedIndex,
            groupId: this.groupId + '',
            pageId: item.pageId + '',
            channelId: item.channelId + '',
          })
        } else {
          // 直播
          PageComponent({
            currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
            navIndex: index,
            pageId: item.pageId + '',
            channelId: item.channelId + '',
            autoRefresh: this.autoRefresh2Page
          }).margin({ top: 40 })
        }
      }, (item: TopNavDTO) => item.channelId + '')
    }
    .indicator(false)
    .loop(false)
    .width('100%')
    .height('100%')
    .cachedCount(3)
    .displayCount(1, true)
    .alignSelf(ItemAlign.Start)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
    .onChange((index: number) => {
      this.currentTopNavSelectedIndex = index
    })
  }
}