import { ContentDetailDTO } from 'wdBean/Index'
import { WDShare } from 'wdShare/Index'
import { PlayerProgressFullScreenView } from './PlayerProgressFullScreenView'
import { PlayerConstants, WDPlayerController } from 'wdPlayer/Index'
import { DateTimeUtils, Logger, WindowModel } from 'wdKit/Index'
import { DisplayDirection } from 'wdConstant/Index'
import { window } from '@kit.ArkUI'

@Component
export struct PlayerFullScreenView {
  private playerController?: WDPlayerController;
  @Consume contentDetailData: ContentDetailDTO
  @Consume @Watch("updateProgress") progressVal: number;
  @Consume status: number
  @Consume displayDirection: DisplayDirection
  @Consume isDragging: boolean
  @State videoDuration: number = this.contentDetailData?.videoInfo?.[0]?.videoDuration || 1
  @State showOperator: boolean = true
  private timer: number = -1
  @State upProVal: string = ''
  @State duration: string = DateTimeUtils.secondToTime(this.videoDuration)

  getTitle() {
    return this.contentDetailData?.newsTitle
    // || this.contentDetailData?.newsSummary || ''
  }

  share() {
    WDShare.shareContent(this.contentDetailData)
  }

  updateProgress() {
    this.upProVal = DateTimeUtils.secondToTime(Math.floor((this.progressVal / 100 * this.videoDuration)))
  }

  aboutToAppear(): void {
    WindowModel.shared.setWindowSystemBarEnable([])
    this.timer = setInterval(() => {
      this.showOperator = false
    }, 5000)
    // 初始显示
    this.updateProgress()
  }

  aboutToDisappear(): void {
    WindowModel.shared.setWindowSystemBarEnable(['status', 'navigation'])
    clearInterval(this.timer)
  }

  restartTimer() {
    clearInterval(this.timer)
    this.showOperator = true
    this.timer = setInterval(() => {
      this.showOperator = false
    }, 5000)
  }

  build() {
    Stack() {
      Row() {
      }.height('100%').width('100%')
      .onClick(() => {
        this.restartTimer()
      })

      this.headerBuilder()
      this.middleSlideBuilder()
      this.bottomBuilder()
    }
    .zIndex(99999)
    .height('100%')
    .width('100%')

  }

  @Builder
  headerBuilder() {
    Row() {
      Row() {
        Image($r(`app.media.ic_back`)).height(24).width(24)
          .onClick(() => {
            this.displayDirection = this.displayDirection == DisplayDirection.VERTICAL ?
            DisplayDirection.VIDEO_HORIZONTAL :
            DisplayDirection.VERTICAL
            WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ?
            window.Orientation.PORTRAIT :
            window.Orientation.LANDSCAPE)
          })
        Text(this.getTitle())
          .fontSize(18)
          .fontColor(Color.White)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .margin({ left: 10 })
      }

      Image($r(`app.media.ic_share_empty`)).height(24).width(24)
        .onClick(() => {
          this.share()
        })

    }
    .width('100%')
    .position({ x: 0, y: 0 })
    .align(Alignment.Top)
    .height(73)
    .alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.SpaceBetween)
    .padding({ left: 40, right: 40 })
    .animation({ duration: 2000 })
    .visibility(this.showOperator ? Visibility.Visible : Visibility.Hidden)
    .linearGradient({
      direction: GradientDirection.Bottom, // 渐变方向
      colors: [['rgba(0,0,0,0.5)', 0],
        ['rgba(1,1,1,0)', 1.0]] // 数组末尾元素占比小于1时满足重复着色效果
    })
  }


  @Builder
  bottomBuilder() {

    Column() {
      Text() {
        Span(this.upProVal)
        Span(' / ')
        Span(this.duration)
      }
      .fontSize(24)
      .fontColor(Color.White)
      .fontWeight(600)
      .margin({ bottom: 30 })
      .visibility(this.isDragging ? Visibility.Visible : Visibility.None)

      Row() {
        Image($r(`app.media.ic_play`)).height(24).width(24)
          .visibility(this.status === PlayerConstants.STATUS_START ? Visibility.None : Visibility.Visible)
          .onClick(() => {
            this.playerController?.switchPlayOrPause()
          })
        Image($r(`app.media.ic_pause`)).height(24).width(24)
          .visibility(this.status === PlayerConstants.STATUS_PAUSE ? Visibility.None : Visibility.Visible)
          .onClick(() => {
            this.playerController?.switchPlayOrPause()
          })

        Text(this.upProVal)
          .fontSize(12)
          .fontWeight(600)
          .fontColor(Color.White)
          .margin({ left: 16, right: 8 })

        PlayerProgressFullScreenView({ playerController: this.playerController }).layoutWeight(1)
          .onTouch((event?: TouchEvent) => {
            if (event) {
              if (event.type === TouchType.Down) {
                clearInterval(this.timer)
              }
              if (event.type === TouchType.Up) {
                this.restartTimer();
              }
            }
          })

        Text(this.duration)
          .fontSize(12)
          .fontWeight(600)
          .fontColor(Color.White)
          .margin({ left: 16 })
      }
      .width('100%')
      .height(73)
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .width('100%')
    .position({ x: 0, y: '100%' })
    .markAnchor({ y: '100%' })
    .align(Alignment.Bottom)
    .padding({ left: 40, right: 40 })
    .animation({ duration: 2000 })
    .visibility(this.showOperator ? Visibility.Visible : Visibility.Hidden)
    .linearGradient({
      direction: GradientDirection.Bottom, // 渐变方向
      colors: [['rgba(0,0,0,0.5)', 0],
        ['rgba(1,1,1,0)', 1.0]] // 数组末尾元素占比小于1时满足重复着色效果
    })

  }

  @Builder
  middleSlideBuilder() {
    Column() {
      Slider({
        value: this.progressVal,
        step: 0.01,
        style: SliderStyle.OutSet
      })
        .trackColor(Color.Transparent)// 设置轨道为透明
        .selectedColor(Color.Transparent)// 设置已选择部分为透明
        .blockColor(Color.Transparent)// 设置滑块为透明
        .trackThickness(4)
        .showSteps(false)// 不显示步进刻度
        .showTips(false)// 不显示提示
        .width('100%')
        .height('100%')
        .onChange((value: number, mode: SliderChangeMode) => {
          this.progressVal = value
          if (mode === SliderChangeMode.Moving) {
            this.isDragging = true
          }
          if (mode === SliderChangeMode.End) {
            this.isDragging = false
          }

          console.log('Transparent slider value:', value)
        })
    }.margin({ top: 73, bottom: 73 })
    .onTouch((event?: TouchEvent) => {
      if (event) {
        if (event.type === TouchType.Down) {
          clearInterval(this.timer)
        }
        if (event.type === TouchType.Up) {
          this.restartTimer();
          this.playerController?.setSeekTime(this.progressVal, SliderChangeMode.End);
        }
      }
    })
  }
}