import {
  Game,
  TouchSprite,
  MyLabel,
  asyncTweenChange,
} from './Game';

import {
  jelly, tweenChange,
} from './../Unit';

import { defaultData } from './DefaultData';

export class MyGame extends Game {

  images = null;

  data = null;
  status = null;

  initData(data) {
    this.images = data.images;

    this.status = {};

    if (!data.data || Object.is(data.data, {})) {
      this.data = defaultData;
    } else {
      this.data = data.data;
    }

    let imgUrlList = [];
    let audioUrlList = [];

    imgUrlList.push(this.data.popUpPosition.bgItem.url);
    imgUrlList.push(this.data.popUpPosition.bgItem2.url);
    audioUrlList.push(this.data.titleAudio);
    audioUrlList.push(this.data.titleLetterAudio);
    audioUrlList.push(this.data.totalAudio);

    this.data.popUpPosition.hotZoneItemArr.forEach(data => {
      audioUrlList.push(data.audio_url);
    });

    imgUrlList = imgUrlList.filter((data) => data != null && data != '');
    audioUrlList = audioUrlList.filter((data) => data != null && data != '');

    this.preLoadData(imgUrlList, audioUrlList);
  }

  preLoadData(imgUrlList, audioUrlList) {
    imgUrlList.forEach((data) => {
      this._parent.addUrlToImages(data);
    });
    audioUrlList.forEach((data) => {
      this._parent.addUrlToAudioObj(data);
    });
  }

  mapScale;
  initView() {
    this.mapScale = this._parent.mapScale;
    // 初始化背景
    this.initBg();

    // 初始化标题
    this.initTittle();

    // 初始化中间部分
    this.initMiddle();

    this.initButton();
  }

  bg;
  initBg() {
    const bgBig = new TouchSprite();
    bgBig.init(this.images.get('img_white_bg'));
    bgBig.x = this._parent.canvasWidth / 2;
    bgBig.y = this._parent.canvasHeight / 2;
    bgBig.setScaleXY(this._parent.mapScaleBig);
    this.addChild(bgBig);

    const bg = new TouchSprite();
    bg.init(this.images.get('img_white_bg'));
    bg.x = this._parent.canvasWidth / 2;
    bg.y = this._parent.canvasHeight / 2;
    bg.setScaleXY(this.mapScale);
    this.addChild(bg);
    this.bg = bg;
  }

  initTittle() {
    const titleBg = new TouchSprite();
    titleBg.init(this.images.get('img_title_bg'));
    titleBg.x = titleBg.width / 2 * this.mapScale;
    titleBg.y = titleBg.height / 2 * this.mapScale;
    titleBg.setScaleXY(this.mapScale);
    this.addChild(titleBg);

    const titleLetter = new MyLabel();
    titleLetter.x = titleBg.width * 1 / 8;
    titleLetter.y = 0;
    titleLetter.fontSize = 48;
    titleLetter.fontColor = "#facf46";
    titleLetter.fontName = 'BerlinSansFBDemi';
    titleLetter.anchorX = 0;
    titleLetter.anchorY = 0.5;
    titleLetter.text = this.data.titleLetter;
    titleLetter.refreshSize();
    titleLetter.addTouchBeganListener(() => {
      this.playAudio(this.data.titleLetterAudio);
    });
    titleBg.addChild(titleLetter);

    const titleLabel = new MyLabel();
    titleLabel.x = titleBg.width * 5 / 8;
    titleLabel.y = 0;
    titleLabel.fontSize = 36;
    titleLabel.fontColor = "#000000";
    titleLabel.fontName = 'FuturaStd';
    titleLabel.anchorX = 0;
    titleLabel.anchorY = 0.5;
    titleLabel.text = this.data.title;
    titleLabel.refreshSize();
    titleLabel.addTouchBeganListener(() => {
      this.playAudio(this.data.titleAudio);
    });
    titleBg.addChild(titleLabel);
  }

  middleBg1;
  middleBg2;
  initMiddle() {
    const bgItem = this.data.popUpPosition.bgItem;
    const bgItem2 = this.data.popUpPosition.bgItem2;

    const bg = this.initMiddleBg(bgItem);
    this.middleBg1 = bg;

    console.log('bgItem2 = ' + JSON.stringify(bgItem2));
    const bg2 = this.initMiddleBg(bgItem2);
    bg2.alpha = 0;
    this.middleBg2 = bg2;

    const bgItemScale = bg.width / bgItem.rect.width;

    this.data.popUpPosition.hotZoneItemArr.forEach(data => {
      const rect = new TouchSprite();
      rect.init(this.images.get('img_title_bg2'));
      rect.anchorX = 0;
      rect.anchorY = 0;
      rect.scaleX = (data.rect.width * bgItemScale) / rect.width;
      rect.scaleY = (data.rect.height * bgItemScale) / rect.height;
      rect.x = -bg.width / 2 + data.rect.x * bgItemScale;
      rect.y = -bg.height / 2 + data.rect.y * bgItemScale;
      bg.addChild(rect);

      // console.log('data = ' + JSON.stringify(data));
      rect.addTouchBeganListener(() => {
        // console.log('data.audio_url = ' + data.audio_url);
        if (data.audio_url) {
          this.playAudio(data.audio_url);
        }
      });
    });
  }

  initMiddleBg(bgItem) {
    const bg = new TouchSprite();
    bg.init(this.images.get(bgItem.url));
    bg.x = this._parent.canvasWidth / 2;
    bg.y = this._parent.canvasHeight / 2 + 35 * this.mapScale;

    const maxScaleX = (this._parent.canvasWidth - 30 * this.mapScale) / bg.width;
    const maxScaleY = (this._parent.canvasHeight - 70 * this.mapScale) / bg.height;

    bg.setScaleXY(Math.min(maxScaleX, maxScaleY));
    this.addChild(bg);
    return bg;
  }

  eyeOpen = true;
  playingTotalAuido = false;
  initButton() {
    const eyeBtn = new TouchSprite();
    eyeBtn.init(this.images.get('btn_eye_open'));
    eyeBtn.x = this._parent.canvasWidth - 60 * this.mapScale;
    eyeBtn.y = this._parent.canvasHeight - 150 * this.mapScale;
    eyeBtn.setScaleXY(this.mapScale);
    eyeBtn.addTouchBeganListener(() => {
      jelly(eyeBtn);
      if (this.eyeOpen) {
        eyeBtn.init(this.images.get('btn_eye_close'));
        tweenChange(this.middleBg1, { alpha: 0 }, 0.2);
        tweenChange(this.middleBg2, { alpha: 1 }, 0.2);
      } else {
        eyeBtn.init(this.images.get('btn_eye_open'));
        tweenChange(this.middleBg1, { alpha: 1 }, 0.2);
        tweenChange(this.middleBg2, { alpha: 0 }, 0.2);
      }
      this.eyeOpen = !this.eyeOpen;
    });
    this.addChild(eyeBtn);

    const btnPlay = new TouchSprite();
    btnPlay.init(this.images.get('btn_play'));
    btnPlay.x = this._parent.canvasWidth - 60 * this.mapScale;
    btnPlay.y = this._parent.canvasHeight - 60 * this.mapScale;
    btnPlay.setScaleXY(this.mapScale);
    btnPlay.addTouchBeganListener(() => {
      jelly(btnPlay);
      if (this.data.totalAudio != '') {
        if (!this.playingTotalAuido) {
          this.playingTotalAuido = true;
          this.playAudio(this.data.totalAudio, true, () => {
            this.playingTotalAuido = false;
            btnPlay.init(this.images.get('btn_play'));
          });
          btnPlay.init(this.images.get('btn_pause'));
        } else {
          this.playingTotalAuido = false;
          btnPlay.init(this.images.get('btn_play'));
          const audio = this._parent.audioObj[this.data.totalAudio];
          if (audio && !audio.paused) {
            audio.pause();
          }
        }
      }
    });
    this.addChild(btnPlay);
  }
}
