import { asyncCallNetworkApiGet, asyncDelay, buttonOnClick, jumpToCourseWare, onHomeworkFinish } from "../script/util";
import { MyCocosSceneComponent } from "../script/MyCocosSceneComponent";

const { ccclass, property } = cc._decorator;

@ccclass
export default class SceneComponent extends MyCocosSceneComponent {

  addPreloadImage() {
    return new Promise<void>((resolve, reject) => {
      this._imageResList.push({ url: this.data.havePic });
      this.data.pageArr.forEach(page => {
        this._imageResList.push({ url: page.bgItem.url });
        this._imageResList.push({ url: page.startBg });
      });

      const bgNode = cc.find('Canvas/bg');
      bgNode.color = cc.color(255, 255, 255);
      const startBg = this.data.pageArr[this.currentPageIdx].startBg;
      this.setNodeSpirteFrameByUrl(startBg, bgNode, resolve);
    })
  }

  async onLoadEnd() {
    await this.initData();
    this.updateView();
    this.initListener();

    await this.startStep1();
    this.updateView();
    await this.startStep2();
  }

  async startStep1() {
    await this.asyncPlayAudioByUrl(this.data.pageArr[this.currentPageIdx].startAudio);
    await asyncDelay(0.3);
    const circulate = async () => {
      const circle = cc.find('Canvas/step1/pad/circle');
      circle.active = true;
      const progress = cc.find('Canvas/step1/pad/circle/progress');
      const bar = progress.getComponent(cc.ProgressBar);
      bar.progress = 1;
      try {
        await Promise.race([
          this.asyncCountDown(progress, 3),
          this.checkPage()
        ]);
        this.step = 1;
      } catch (error) {
        this.showTips(`未检测到对应页面`);
        circle.active = false;
        await circulate();
      }
    }
    await circulate();

  }
  async startStep2() {
    const ps1 = this.asyncPlayAudioByUrl(this.data.pageArr[this.currentPageIdx].hotZoneItemArr[this.currentPartIdx].audio_url);
    const ps2 = this.checkPart();
    await Promise.all([ ps1, ps2 ]);

    const middleLayer = cc.find('middleLayer');
    if (middleLayer) {
      const middleLayerComponent = middleLayer.getComponent('middleLayer');
      middleLayerComponent.setData('NJ_game_select', {
        folderId: this.folderId,
        step: this.step,
        currentPageIdx: this.currentPageIdx,
        currentPartIdx: this.currentPartIdx
      });
    }

    jumpToCourseWare(this.rows[this.currentPartIdx].id);
  }

  checkPage() {
    if (!window["courseware"] || cc.sys.isBrowser) {
      // 没有中间层的话，直接判断为检测成功
      return;
    }

    let checkSuccess = false;
    // 定时三秒检测
    const timeout = new Promise((resolve, reject) => {
      setTimeout(() => {
        if(!checkSuccess){
          window["courseware"].closeOsmoFingerRead();
        }
        reject(new Error('checkpage timeout'));
      }, 2800)
    });
    const pageId = this.data.pageArr[this.currentPageIdx].pageIdx;
    const check = new Promise<void>((resolve, reject) => {
      window["air"].osmoFingerReadCallback = (result) => {
        const resultObj = JSON.parse(result);
        if (resultObj.page_id == pageId) {
          // 检测成功
          checkSuccess = true;
          window["courseware"].closeOsmoFingerRead();
          resolve();
        }
      };
      window["courseware"].openOsmoFingerRead({
        "page_id": pageId,
        "book_id": "opw1"
      })
    });
    return Promise.race([check, timeout]);
  }

  checkPart() {
    if (!window["courseware"] || cc.sys.isBrowser) {
      // 没有中间层的话，直接判断为检测成功
      return true;
    }

    const hotRect = this.data.pageArr[this.currentPageIdx].hotZoneItemArr[this.currentPartIdx].rect;
    const { width, height } = this.data.pageArr[this.currentPageIdx].bgItem.rect;
    const checkInRegion = (p) => {
      const rect = {
        x: hotRect.x / width,
        y: hotRect.y / height,
        width: hotRect.width / width,
        height: hotRect.height / height,
      }
      const w = p.x > rect.x && p.x < (rect.x + rect.width);
      const h = p.y > rect.y && p.y < (rect.y + rect.height);
      return w && h;
    };
    const pageId = this.data.pageArr[this.currentPageIdx].pageIdx;
    return new Promise<void>((resolve, reject) => {
      window["air"].osmoFingerReadCallback = (result) => {
        this.showTips("===========");
        const resultObj = JSON.parse(result);
        const p = resultObj.finger_pos_in_page;
        if (p.x == -1 || p.y == -1) {
          return;
        }
        if (checkInRegion(p)) {
          // 检测成功
          window["courseware"].closeOsmoFingerRead();
          resolve();
        }
      };
      window["courseware"].openOsmoFingerRead({
        "page_id": pageId,
        "book_id": "opw1"
      })
    });
  }

  folderId: any;
  rows: Array<any>;
  step = 0;
  currentPageIdx = 0;
  currentPartIdx = 0;
  async initData() {
    const middleLayer = cc.find('middleLayer');
    let folderId = 20650;
    if (middleLayer) {
      const middleLayerComponent = middleLayer.getComponent('middleLayer');
      const tmpData = middleLayerComponent.getData('NJ_game_select');
      this.currentPageIdx = tmpData.currentPageIdx || 0;
      this.currentPartIdx = tmpData.currentPartIdx || 0;
      this.step = tmpData.step || 0;
      folderId = tmpData.folderId;
      this.folderId = tmpData.folderId;

      middleLayerComponent.setData('NJ_game_select: partnerData', {
        skeJsonData: this.data.skeJsonData,
        texJsonData: this.data.texJsonData,
        texPngData: this.data.texPngData,
        havePic: this.data.havePic
      });
    }
    console.log('folderId = ' + folderId);

    const resStr = await asyncCallNetworkApiGet('/api/syllabus/v1/list', {
      pid: folderId
    });
    console.log('resStr = ' + resStr);
    const res = JSON.parse(resStr);
    this.rows = res.rows.filter(row => row.name != '指读索引');
  }

  asyncCountDown(node: cc.Node, time: number) {
    return new Promise<void>((resolve, reject) => {
      this.countDown(node, time, () => {
        resolve();
      });
    });
  }
  countDown(node: cc.Node, time: number, callback = null) {
    const progressComponent = node.getComponent(cc.ProgressBar);
    cc.tween(progressComponent)
      .to(time, { progress: 0 })
      .call(() => {
        callback && callback();
      })
      .start();
  }

  updateView() {
    const page = cc.find('Canvas/step1/pad/mask/page');
    const pageUrl = this.data.pageArr[this.currentPageIdx].bgItem.url;
    this.setNodeSpirteFrameByUrl(pageUrl, page, () => {
      page.scale = page.parent.height / page.height;
    });

    const step1 = cc.find('Canvas/step1');
    const step2 = cc.find('Canvas/step2');
    if (this.step == 0) {
      step1.active = true;
      step2.active = false;
    } else {
      step1.active = false;
      step2.active = true;
    }

    const partImg = cc.find('Canvas/step2/pad/mask/page');
    this.setNodeSpirteFrameByUrl(pageUrl, partImg, () => {
      // partImg.scale = partImg.parent.height / partImg.height;
    });

    const book_left = cc.find('Canvas/step1/book_left');
    const book_right = cc.find('Canvas/step1/book_right');
    if (this.currentPageIdx % 2 == 0) {
      book_left.active = true;
      book_right.active = false;
    } else {
      book_left.active = false;
      book_right.active = true;
    }

    const bgNode = cc.find('Canvas/bg');
    bgNode.color = cc.color(255, 255, 255);
    const startBg = this.data.pageArr[this.currentPageIdx].startBg;
    this.setNodeSpirteFrameByUrl(startBg, bgNode);
  }

  showTips(tips) {
    const middleLayer = cc.find('middleLayer');
    if (middleLayer) {
      const middleLayerComponent = middleLayer.getComponent('middleLayer');
      middleLayerComponent.showTips(tips);
    } else {
      console.log(tips);
    }
  }

  initListener() {
  }

  asyncPlayAudioByUrl(url: string) {
    return new Promise((resolve, reject) => {
      this.playAudioByUrl(url, () => {
        resolve();
      });
    });
  }

  setNodeSpirteFrameByUrl(url: string, node: cc.Node, callBack = null) {
    cc.assetManager.loadRemote(url, (err, tex) => {
      node.getComponent(cc.Sprite).spriteFrame = new cc.SpriteFrame(tex);
      callBack && callBack();
    });
  }
}
