import router from '@ohos.router';
import window from '@ohos.window';
import deviceInfo from '@ohos.deviceInfo';
import { WindowModel } from 'wdKit';
import { PlayerConstants, WDPlayerController } from 'wdPlayer';
import { devicePLSensorManager } from 'wdDetailPlayApi';
import { OperationListView } from './OperationListView';
import { ContentDetailDTO, RmhInfoDTO, UserInfoDTO } from 'wdBean/Index';
import { DetailDialog } from './DetailDialog';

@Component
export struct PlayerTitleComment {
  private playerController?: WDPlayerController;
  @State @Watch('watchSpeed') playSpeed: number = 1;
  @State comment: string = '';
  @Consume contentDetailData: ContentDetailDTO | undefined
  @Consume isFullScreen: boolean;
  @Consume progressVal: number;
  @Consume videoLandScape?: number
  @Consume showComment?: boolean
  @State isOpen: boolean = false
  @State status: number = PlayerConstants.STATUS_START;
  dialogController: CustomDialogController = new CustomDialogController({
    builder: DetailDialog({
      name: this.getName(),
      title: this.getTitle(),
      summary: this.getSummary(),
      isOpenDetail: this.isOpen

    }),
    autoCancel: false,
    customStyle: true,
    alignment: DialogAlignment.Bottom
  })

  aboutToAppear() {
    if (this.playerController) {
      this.playerController.onStatusChange = (status: number) => {
        this.status = status
      }

    }

  }

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

  getName() {
    // console.error(this.contentDetailData?.newsSourceName + '===========' + this.contentDetailData?.editorName)
    // this.contentDetailData?.newsSourceName ||  authTitle
    return this.contentDetailData?.rmhInfo?.rmhName || ''
  }

  getIcon() {
    // console.error(this.contentDetailData?.newsSourceName + '===========' + this.contentDetailData?.editorName)
    // this.contentDetailData?.newsSourceName ||
    return this.contentDetailData?.rmhInfo?.authIcon || ''
  }

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

  getSummary() {
    return this.contentDetailData?.newsSummary || ''
  }

  build() {
    Column() {

      // if (this.contentDetailData?.videoInfo[0]?.videoLandScape === 1) {
      //   Column() {
      //     Row() {
      //       Image($r('app.media.ic_switch_orientation'))
      //         .width(16)
      //         .aspectRatio(1)
      //         .objectFit(ImageFit.Contain)
      //         .padding({ left: 8, right: 4 })
      //       Text("全屏观看")
      //         .fontColor(Color.White)
      //         .fontSize(12)
      //         .layoutWeight(1)
      //     }
      //     .width(84)
      //     .height(28)
      //     .backgroundColor('#0d0d0d')
      //     .border({ width: 1, color: '#4DFFFFFF', radius: 2 })
      //     .alignItems(VerticalAlign.Center)
      //     .justifyContent(FlexAlign.Center)
      //     .visibility(this.videoLandScape == 2 ? Visibility.Hidden : Visibility.Visible)
      //     .onClick(() => {
      //       // this.isFullScreen = !this.isFullScreen;
      //       // WindowModel.shared.setPreferredOrientation(window.Orientation.LANDSCAPE);
      //       // devicePLSensorManager.devicePLSensorOn(window.Orientation.LANDSCAPE);
      //     })
      //   }
      //   .width('100%')
      //   .margin({ top: 452 })
      //
      // }


      Row() {
        Column() {
          if (this.getName()) {
            Row() {
              Text("@" + this.getName())
                .fontColor(Color.White)
                .fontSize(15)
                .maxLines(1)
                .textOverflow({ overflow: TextOverflow.Ellipsis })
              if (this.getIcon()) {
                Image(this.getIcon()).height(10).margin({ left: 4 })
              }
            }
          }
          if (this.getTitle()) {
            Text(this.getTitle())
              .fontColor(Color.White)
              .fontSize(15)
              .maxLines(3)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
          }


          if (this.contentDetailData?.newsSummary && this.showComment) {
            Text('查看详情 > ')
              .margin({ top: 8 })
              .padding(6)
              .borderRadius(2)
              .backgroundColor('#636363')
              .fontColor(Color.White)
              .fontSize(12)
              .onClick(() => {
                console.log('click===', this.dialogController?.open)
                this.isOpen = true
                this.dialogController?.open()
              })
          }

        }
        .layoutWeight(1)
        .alignItems(HorizontalAlign.Start)
        .margin({ left: 16 })

        OperationListView({
          playerController: this.playerController
        })
          .width(48)
      }
      .width('100%')
      .layoutWeight(1)
      .alignItems(VerticalAlign.Bottom)
      .onClick(() => {
        this.playerController?.switchPlayOrPause()
      })

      Row() {
        Column() {
          Slider({
            value: this.progressVal,
            step: 0.01,
            // style: SliderStyle.OutSet
          })
            .blockColor(this.status === PlayerConstants.STATUS_START ? Color.Transparent :
            $r('app.color.play_block_color'))
            .trackColor(this.status === PlayerConstants.STATUS_START ? $r('app.color.play_track_color') :
            $r('app.color.pause_track_color'))
            .selectedColor(this.status === PlayerConstants.STATUS_START ? $r('app.color.play_selected_color') :
            $r('app.color.pause_selected_color'))
            .trackThickness(this.status === PlayerConstants.STATUS_START ? 1 : 4)
            .blockStyle({
              type: this.status === PlayerConstants.STATUS_START ? SliderBlockType.DEFAULT : SliderBlockType.IMAGE,
              image: $r('app.media.ic_player_block')
            })
            .blockSize({ width: 18, height: 12 })
            .width('100%')
            .height(19)
            .onChange((value: number, mode: SliderChangeMode) => {
              this.playerController?.setSeekTime(Math.floor(value), mode);
            })

          if (this.showComment) {
            Row() {
              Image($r('app.media.ic_back'))
                .width(24)
                .height(24)
                .aspectRatio(1)
                .onClick(() => {
                  router.back();
                })

              TextInput({ placeholder: '说两句...', text: this.comment })
                .placeholderColor(Color.White)
                .placeholderFont({ size: 14 })
                .fontColor(Color.White)
                .fontSize(14)
                .maxLines(1)
                .layoutWeight(1)
                .backgroundColor('#1a1a1a')
                .borderRadius(2)
                .height(30)
                .margin({ left: 12 })
            }
            .alignItems(VerticalAlign.Center)
            .padding({
              left: 16,
              right: 16,
              top: 11,
              bottom: 11
            })
          }

        }
      }.backgroundColor(Color.Black)

    }
    .height('100%')
    .width('100%')
    .alignItems(HorizontalAlign.End)
    .align(Alignment.End)
    .opacity(this.isOpen ? 0 : 1)
    .animation({ duration: 200 })
  }
}