import componentUtils from '@ohos.arkui.componentUtils';
import { WDPlayerController } from '../controller/WDPlayerController'
import { WindowModel } from 'wdKit';
import { Logger } from '../utils/Logger';

class Size {
  width: Length = "100%";
  height: Length = "100%";

  constructor(width: Length, height: Length) {
    this.width = width;
    this.height = height;
  }
}

let insIndex: number = 0;
const TAG = 'WDPlayerRenderView'

class MGPlayRenderViewIns {
  static intCount: number = 0;

  static add() {
    MGPlayRenderViewIns.intCount++;
    WindowModel.shared.setWindowKeepScreenOn(true);
    console.log("add-- +1")
  }

  static del() {
    console.log("del-- -1")
    MGPlayRenderViewIns.intCount--;
    if (MGPlayRenderViewIns.intCount <= 0) {
      WindowModel.shared.setWindowKeepScreenOn(false);
    }
  }
}

/**
 * 播放窗口组件
 */
@Component
export struct WDPlayerRenderView {
  private playerController?: WDPlayerController;
  private xComponentController: XComponentController = new XComponentController();
  private insId: string = "WDPlayRenderView" + insIndex;
  onLoad?: ((event?: object) => void);
  @State videoWidth: number = 16
  @State videoHeight: number = 9
  @State selfSize: Size = new Size('100%', '100%');

  aboutToAppear() {
    MGPlayRenderViewIns.add();

    insIndex++;
    if (!this.playerController) {
      return
    }

    this.playerController.onVideoSizeChange = (width: number, height: number) => {
      // console.log(`WDPlayerRenderView onVideoSizeChange width:${width} videoTop:${height}`)
      Logger.info(TAG, ` onVideoSizeChange width:${width} videoTop:${height}`)
      this.videoWidth = width;
      this.videoHeight = height;
      this.updateLayout()
    }
  }

  aboutToDisappear() {
    Logger.info(TAG, `aboutToDisappear`)
    MGPlayRenderViewIns.del();
  }

  build() {
    Row() {
      // 设置为“surface“类型时XComponent组件可以和其他组件一起进行布局和渲染。
      XComponent({
        id: this.insId,
        type: XComponentType.SURFACE,
        controller: this.xComponentController
      })
        .onLoad(async (event) => {
          Logger.info(TAG, 'onLoad')
          this.xComponentController.setXComponentSurfaceSize({
            surfaceWidth: 1920,
            surfaceHeight: 1080
          });
          this.playerController?.setXComponentController(this.xComponentController)
          if (this.onLoad) {
            this.onLoad(event)
          }
        })
        .width('100%')// .width(this.selfSize.width)
          // .height(this.selfSize.height)
        .aspectRatio(this.videoWidth / this.videoHeight)
        .renderFit(RenderFit.RESIZE_COVER)
    }

    .onAreaChange(() => {
      this.updateLayout()
    })
    .backgroundColor("#000000")

    // .height('100%')
    // .width('100%')
  }

  updateLayout() {
    // let info = componentUtils.getRectangleById(this.insId);
    const windowRect = WindowModel.shared.getWindowProperties()?.windowRect
    if (windowRect) {
      const info = windowRect
      if (info.width > 0 && info.height > 0 && this.videoHeight > 0 && this.videoWidth > 0) {
        if (info.width / info.height > this.videoWidth / this.videoHeight) {
          let scale = info.height / this.videoHeight;
          this.selfSize = new Size((this.videoWidth * scale / info.width) * 100 + "%", '100%');
        } else {
          let scale = info.width / this.videoWidth;
          this.selfSize = new Size('100%', (this.videoHeight * scale / info.height) * 100 + "%");
        }
      }
    }


  }
}