/** live2d 加载基类，改自 https://www.fghrsh.net/post/123.html  */
class Live2d_tips {
  constructor(config) {
    let {
      modelSrc,
      modelId,
      modelSite,
      actionTime,
      actionText,
      musicListId,
      aplayer,
    } = config;

    this.modelSrc = modelSrc;
    this.width = modelSite.width;
    this.height = modelSite.height;
    this.hOffset = modelSite.hOffset;
    this.vOffset = modelSite.vOffset;
    this.actionTime = actionTime;
    this.actionText = actionText;
    this.modelId = modelId;
    this.musicListId = musicListId;
    this.modelList = null;
    this.aplayerMode = aplayer.mode;

    if (modelSrc === null && modelId === undefined) {
      throw new Error("ModelID and ModelSrc 为空, 必须填写其一.");
    }
    switch (modelId) {
      case 0:
      case 1:
      case 2:
      case 3:
        this.executor();
        break;
      default:
        throw new Error("ModelId 不符合规则 (id: 0 ~ 3)");
    }
  }
  executor() {
    this.loadWidget();
  }
  loadWidget() {
    if (this.modelSrc) {
      console.log(`location found ${this.modelSrc}`);
    } else {
      console.log("network to loading");
    }

    document.body.insertAdjacentHTML(
      "beforebegin",
      `
      <div id="live2d-widget">
        <div class="live2d-tips"></div>
        <canvas id="live2d" width="830" height="900"></canvas>
        <div class="live2d-tools">
          <span class="fa fa-lg fa-camera-retro"></span>
          <span class="fa fa-lg fa-music"></span>
          <span class="fa fa-lg fa-info-circle"></span>
          <span class="fa fa-lg fa-times"></span>
        </div>
        <div id="aplayer"></div>
      </div>
      <div class="live2d-toggle">看板娘</div>
    `
    );

    this.setSite();

    let userAction = false,
      textTimer,
      actionTimer;

    (function welcomeWidget() {
      const now = new Date().getHours();
      let text;

      if (location.pathname !== "/") {
        if (now >= 5 && now < 7) {
          text = `早上好，我的主人`;
        } else if (now >= 7 && now < 11) {
          text = `上午过的舒服吗？<span>不要太劳累哦。</span>`;
        } else if (now >= 11 && now < 13) {
          text = `该吃午饭了，休息休息吧~`;
        } else if (now >= 13 && now < 15) {
          text = `工作时间，喝杯茶<span>「提提神」</span>`;
        } else if (now >= 15 && now < 17) {
          text = `完成的差不多了，赶紧收工吧!`;
        } else if (now >= 17 && now < 19) {
          text = `吃晚饭咯，一天过得真快呀。`;
        } else if (now >= 19 && now < 21) {
          text = `晚上好，今天过得这么样？`;
        } else if (now >= 21 && now < 23) {
          text = `早点睡吧，对身体好，明天又是<span>「元气满满」</span>的一天`;
        } else {
          text = `快点睡觉！再不睡觉，我生气了哦。`;
        }
      }
      showMessage(text, 7000, 8);
    })();

    window.addEventListener("mousemove", () => (userAction = true));
    window.addEventListener("keydown", () => (userAction = true));

    setInterval(() => {
      if (userAction) {
        userAction = false;
        clearInterval(actionTimer);
        actionTimer = null;
      } else if (!actionTimer) {
        actionTimer = setInterval(() => {
          showMessage(this.actionText, 4000, 9);
        }, this.actionTime);
      }
    }, 2000);

    let musicArr = [],
      audio = null;

    document
      .querySelector("#live2d-widget #live2d")
      .addEventListener("click", () => {
        hitokoto("动画");
      });
    document
      .querySelector("#live2d-widget #live2d")
      .addEventListener("mouseover", () => {
        let tools = document.querySelector("#live2d-widget .live2d-tools");

        tools.classList.add("active");
      });
    document
      .querySelector("#live2d-widget .live2d-tools")
      .addEventListener("mouseover", function () {
        this.classList.add("active");
      });
    document
      .querySelector("#live2d-widget #live2d")
      .addEventListener("mouseout", () => {
        let tools = document.querySelector("#live2d-widget .live2d-tools");

        tools.classList.remove("active");
      });
    document
      .querySelector(".live2d-tools .fa-camera-retro")
      .addEventListener("click", () => {
        showMessage(`卡哇伊，合影留念吧~`, 6000, 9);
        Live2D.captureName = "photo.png";
        Live2D.captureFrame = true;
      });
    document
      .querySelector(".live2d-tools .fa-music")
      .addEventListener("click", () => {
        // 调用hitokoto提供的api
        fetch163Playlist(this.musicListId)
          .then((data) => {
            let song = randSection(data);

            this.loadAplayer(song.name, song.artist, song.url, song.pic);
          })
          .catch(console.error);
      });
    document
      .querySelector(".live2d-tools .fa-info-circle")
      .addEventListener("click", () => {
        showMessage(`Go go go~`, 6000, 9);
        open("https://www.live2d.com/en/");
      });
    document
      .querySelector(".live2d-tools .fa-times")
      .addEventListener("click", function () {
        let live2d = document.querySelector("#live2d-widget");

        live2d.style.bottom = "-500px";
        setTimeout(() => {
          live2d.style.display = "none";
          document.querySelector(".live2d-toggle").classList.add("active");
        }, 2000);
      });
    document.querySelector(".live2d-toggle").addEventListener("click", () => {
      document.querySelector(".live2d-toggle").classList.remove("active");
      let live2d = document.querySelector("#live2d-widget");
      console.log(this.vOffset);
      live2d.style.display = "block";
      setTimeout(() => {
        live2d.style.bottom = this.vOffset + "px";
      }, 0);
    });

    function hitokoto(typeName) {
      let type;
      switch (typeName) {
        case "动画":
          type = "a";
          break;
        case "漫画":
          type = "b";
          break;
        case "游戏":
          type = "c";
          break;
        default:
          typeName = "动画";
          type = "a";
          break;
      }
      fetch(`https://v1.hitokoto.cn/?c=${type}`)
        .then((response) => response.json())
        .then((result) => {
          const text = `来自${typeName} <span>「${result.from}」</span> 的留言`;
          showMessage(result.hitokoto, 4000, 9);
          setTimeout(() => {
            showMessage(text, 4000, 9);
          }, 4000);
        });
    }

    const loadJSON = async (CDN) => {
      const response = await fetch(`${CDN}model_list.json`);
      this.modelList = await response.json();
    };

    const loadModel = async (
      CDN = "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
    ) => {
      if (!this.modelSrc) {
        await loadJSON(CDN);
        let target = this.modelList.models[this.modelId];
        loadlive2d("live2d", `${CDN}model/${target}/index.json`);
      } else {
        loadlive2d("live2d", this.modelSrc);
      }
    };

    function randSection(obj) {
      return Array.isArray(obj)
        ? obj[Math.floor(Math.random() * obj.length)]
        : obj;
    }

    function showMessage(text, timeout, protery) {
      if (
        !text ||
        (sessionStorage.getItem("tips-text") &&
          sessionStorage.getItem("tips-text") > protery)
      )
        return;

      if (textTimer) {
        clearTimeout(textTimer);
        textTimer = null;
      }
      sessionStorage.setItem("tips-text", protery);
      let tips = document.querySelector("#live2d-widget .live2d-tips");
      let tip = randSection(text);
      tips.innerHTML = tip;
      tips.classList.add("active");

      textTimer = setTimeout(() => {
        tips.classList.remove("active");
        sessionStorage.removeItem("tips-text");
      }, timeout);
    }

    const devtools = () => {};
    console.log("%c", devtools);
    devtools.toString = () => {
      showMessage(
        `Live2d 有官网文档哦 ~ 请访问 <span>「https://www.live2d.com/en/」</span>`,
        4000,
        9
      );
    };
    window.addEventListener("copy", () => {
      showMessage(`你想获得力量吗？`, 4000, 9);
    });
    window.addEventListener("visibilitychange", () => {
      if (!document.hidden) showMessage("你还好吗，担心死你了~", 4000, 9);
    });

    loadModel();
  }
  setSite() {
    let live2d = document.querySelector("#live2d-widget");
    setTimeout(() => {
      live2d.style.bottom = this.vOffset + "px";
      live2d.style.left = this.hOffset + "px";
      live2d.style.width = this.width + "px";
      live2d.style.height = this.height + "px";
    }, 0);
  }
  loadAplayer(name, artist, url, pictrue) {
    if (typeof this.aplayerMode === "undefined") {
      this.aplayerMode = false;
    }
    console.log(this.aplayerMode);
    const ap = new APlayer({
      container: document.getElementById("aplayer"),
      fixed: this.aplayerMode,
      audio: [
        {
          name: `${name}`,
          artist: `${artist}`,
          url: `${url}`,
          cover: `${pictrue}`,
        },
      ],
    });
  }
}