import window from '@ohos.window';
import { WindowModel } from 'wdKit';
import { WDPlayerController, PlayerConstants } from 'wdPlayer';
import { devicePLSensorManager } from 'wdDetailPlayApi';
import { PlaySpeedDialog } from 'wdDetailPlayApi';
import { PlayViewModel } from '../viewmodel/PlayViewModel';

/**
 * 全屏播放器进度条
 */
@Component
export struct PlayerProgressBar {
  private playerController?: WDPlayerController;
  @State curContId?: string = undefined;
  @State @Watch('switchSpeed') playSpeed: number = 1;
  @Consume currentTime: string;
  @Consume totalTime: string;
  @Consume progressVal: number;
  @Consume status: number;
  @Consume isFullScreen: boolean;
  @Consume nextContId: string;
  @Consume @Watch("playVMChanged") playVM: PlayViewModel;
  speedDialogController: CustomDialogController = new CustomDialogController({
    builder: PlaySpeedDialog({
      playSpeed: $playSpeed,
      isFullScreen: $isFullScreen
    }),
    alignment: DialogAlignment.CenterEnd,
    customStyle: true
  })

  switchSpeed() {
    this.playerController?.setSpeed(this.playSpeed);
  }

  switchPause() {
    this.status = PlayerConstants.STATUS_PAUSE;
    this.playerController?.pause();
  }

  switchSubId(contId?: string) {
    if (contId) {
      this.playerController?.stop();
      this.playVM.playWithContentId(contId);
    }
  }

  playVMChanged(name: string) {
    this.curContId = this.playVM.contentId
  }

  build() {
    Column() {
      // Row() {
      //   Column() {
      //     Image(this.status === PlayerConstants.STATUS_START ?
      //     $r('app.media.ic_pause') : $r('app.media.ic_play'))
      //       .width($r('app.float.control_image_width'))
      //       .aspectRatio(1)
      //       .onClick(() => {
      //         let curStatus = (this.status === PlayerConstants.STATUS_START);
      //         this.status = curStatus ? PlayerConstants.STATUS_PAUSE : PlayerConstants.STATUS_START;
      //         this.playerController?.switchPlayOrPause();
      //       })
      //   }
      //   .justifyContent(FlexAlign.Center)
      //   .alignItems(HorizontalAlign.Center)
      //   .width(44)
      //   .height('100%')
      //
      //   Text(this.currentTime)
      //     .fontSize($r("app.float.font_size_14"))
      //     .fontColor(Color.White)
      //   Slider({
      //     value: this.progressVal,
      //     step: 1,
      //     style: SliderStyle.OutSet
      //   })
      //     .blockColor(Color.White)
      //     .trackColor($r('app.color.track_color'))
      //     .selectedColor($r('app.color.index_tab_selected_font_color'))
      //     .trackThickness(1)
      //     .layoutWeight(1)
      //     .onChange((value: number, mode: SliderChangeMode) => {
      //       this.playerController?.setSeekTime(value, mode);
      //     })
      //   Text(this.totalTime)
      //     .fontSize($r("app.float.font_size_14"))
      //     .fontColor(Color.White)
      //
      //   Column() {
      //     Image($r('app.media.ic_fullscreen'))
      //       .width($r('app.float.control_image_width'))
      //       .aspectRatio(1)
      //       .onClick(() => {
      //         this.isFullScreen = !this.isFullScreen;
      //         WindowModel.shared.setPreferredOrientation(window.Orientation.LANDSCAPE);
      //         devicePLSensorManager.devicePLSensorOn(window.Orientation.LANDSCAPE);
      //       })
      //   }
      //   .justifyContent(FlexAlign.Center)
      //   .alignItems(HorizontalAlign.Center)
      //   .width(44)
      //   .height('100%')
      // }
      // .width('100%')
      // .visibility(this.isFullScreen ? Visibility.None : Visibility.Visible)

      Column() {
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
          Text(this.currentTime)
            .fontSize($r("app.float.font_size_14"))
            .fontColor(Color.White)

          Slider({
            value: this.progressVal,
            step: 1
          })
            .blockColor(Color.White)
            .trackColor($r('app.color.track_color'))
            .selectedColor($r('app.color.index_tab_selected_font_color'))
            .trackThickness(1)
            .layoutWeight(1)
            .onChange((value: number, mode: SliderChangeMode) => {
              this.playerController?.setSeekTime(value, mode);
            })

          Text(this.totalTime)
            .fontSize($r("app.float.font_size_14"))
            .fontColor(Color.White)
        }
        .width('98%')
        .height('40%')
        .padding({ left: '1%', right: '1%' })

        Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
          Row() {
            Image(this.status === PlayerConstants.STATUS_START ?
            $r('app.media.ic_pause') : $r('app.media.ic_play'))
              .width($r('app.float.control_image_width'))
              .aspectRatio(1)
              .onClick(() => {
                let curStatus = (this.status === PlayerConstants.STATUS_START);
                this.status = curStatus ? PlayerConstants.STATUS_PAUSE : PlayerConstants.STATUS_START;
                this.playerController?.switchPlayOrPause();
              })
              .margin({ right: '4%' })

            Image($r('app.media.ic_next'))
              .width($r('app.float.control_image_width'))
              .aspectRatio(1)
              .margin({ right: '4%' })
              .visibility(this.nextContId ? Visibility.Visible : Visibility.None)
              .onClick(() => {
                this.playerController?.stop();
                this.playVM.playWithContentId(this.nextContId);
              })

          }
          .justifyContent(FlexAlign.Start)
          .width('50%')
          .height('100%')
          .padding({ left: '2%' })

          Row() {
            Text(this.playSpeed == 1 ? '倍速' : PlayerConstants.SPEED_ARRAY[this.playSpeed].text)
              .fontSize($r("app.float.font_size_14"))
              .fontColor(Color.White)
              .margin({ right: '4%' })
              .onClick(() => {
                this.speedDialogController.open();
              })

            Column() {
              Image($r('app.media.ic_fullscreen'))
                .width($r('app.float.control_image_width'))
                .aspectRatio(1)
                .onClick(() => {
                  this.isFullScreen = !this.isFullScreen;
                  WindowModel.shared.setPreferredOrientation(window.Orientation.PORTRAIT);
                  devicePLSensorManager.devicePLSensorOn(window.Orientation.PORTRAIT);
                })
            }
            .justifyContent(FlexAlign.Center)
            .alignItems(HorizontalAlign.Center)
            .width(44)
            .height('100%')
            .margin({ right: '2%' })
          }
          .justifyContent(FlexAlign.End)
          .width('50%')
          .height('100%')
          .margin({ right: '2%' })
        }
        .width('100%')
        .height('60%')
      }
      .width('100%')
      .height('100%')
      .visibility(this.isFullScreen ? Visibility.Visible : Visibility.None)

    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}