(function (window) {
  let l = 50, // 滑块边长
    r = 0, // 滑块半径
    w = 300, // canvas宽度
    h = 150, // canvas高度
    PI = Math.PI;
  let L = l + r * 2; // 滑块实际边长

  function createCanvas(width, height) {
    const canvas = createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    return canvas;
  }

  function createImg(onload, info) {
    const img = createElement("img");
    img.crossOrigin = "Anonymous";
    img.onload = onload;
    img.onerror = () => {
      img.src = getRandomImg(info.backgroundImage);
    };
    img.src = getRandomImg(info.backgroundImage);
    return img;
  }

  function createImg2(onload, info) {
    const block = createElement("img");
    block.crossOrigin = "Anonymous";
    block.onload = onload;
    block.onerror = () => {
      block.src = getRandomImg(info.frontImage);
    };
    block.src = getRandomImg(info.frontImage);
    return block;
  }

  function createElement(tagName) {
    return document.createElement(tagName);
  }

  function addClass(tag, className) {
    tag.classList.add(className);
  }

  function removeClass(tag, className) {
    tag.classList.remove(className);
  }

  function getRandomImg(val) {
    return val;
  }

  function sum(x, y) {
    return x + y;
  }

  function square(x) {
    return x * x;
  }

  function clear(obj) {
    obj.canvasCtx.clearRect(0, 0, w, h);
    obj.blockCtx.clearRect(0, 0, w, h);
    obj.block.width = w;
    document.getElementById("msg").innerHTML = null;
    document.getElementById("captcha").innerHTML = null;
  }

  class jigsaw {
    constructor(el, success, fail, info, parent) {
      this.el = el;
      this.success = success;
      this.fail = fail;
      this.info = info;
      this.parent = parent;
    }

    init() {
      if (this.info) {
        const { backgroundHeight, backgroundWidth, frontHeight, frontWidth } =
          this.info;
        l = frontHeight;
        r = 0;
        w = backgroundWidth;
        h = backgroundHeight;
        L = frontWidth;
      }
      this.initDOM();
      this.initImg();
      this.bindEvents();
    }

    initDOM() {
      const canvas = createCanvas(w, h); // 画布
      const block = canvas.cloneNode(true); // 滑块
      const msg = createElement("div");
      const sliderContainer = createElement("div");
      const refreshIcon = createElement("div");
      const sliderMask = createElement("div");
      const slider = createElement("div");
      const sliderIcon = createElement("span");
      const text = createElement("span");

      block.className = "block";
      msg.id = "msg";
      sliderContainer.className = "sliderContainer";
      refreshIcon.className = "refreshIcon";
      sliderMask.className = "sliderMask";
      slider.className = "slider";
      sliderIcon.className = "sliderIcon";
      text.innerHTML = "向右滑动滑块填充拼图";
      text.className = "sliderText";

      const el = this.el;
      el.appendChild(canvas);
      el.appendChild(refreshIcon);
      el.appendChild(block);
      el.appendChild(msg);
      slider.appendChild(sliderIcon);
      sliderMask.appendChild(slider);
      sliderContainer.appendChild(sliderMask);
      sliderContainer.appendChild(text);
      el.appendChild(sliderContainer);

      Object.assign(this, {
        canvas,
        block,
        sliderContainer,
        refreshIcon,
        slider,
        sliderMask,
        sliderIcon,
        text,
        msg,
        canvasCtx: canvas.getContext("2d"),
        blockCtx: block.getContext("2d"),
        addClass,
        clear,
      });
    }

    initImg() {
      const block = createImg2(() => {
        this.blockCtx.drawImage(block, 0, 0, w, h);
      }, this.info);
      const img = createImg(() => {
        this.canvasCtx.drawImage(img, 0, 0, w, h);
      }, this.info);
      this.img = img;
    }

    clean() {
      this.canvasCtx.clearRect(0, 0, w, h);
      this.blockCtx.clearRect(0, 0, w, h);
      this.block.width = w;
    }

    bindEvents() {
      this.el.onselectstart = () => false;
      this.refreshIcon.onclick = () => {
        this.reset();
      };

      let originX,
        originY,
        trail = [],
        isMouseDown = false;
      var that = this;

      var handleDragStart = function (e) {
        originX = e.clientX || e.touches[0].clientX;
        originY = e.clientY || e.touches[0].clientY;
        // (originX = e.x), (originY = e.y);
        isMouseDown = true;
      };

      var handleDragMove = function (e) {
        if (!isMouseDown) return false;
        var eventX = e.clientX || e.touches[0].clientX;
        var eventY = e.clientY || e.touches[0].clientY;
        const moveX = eventX - originX;
        const moveY = eventY - originY;
        if (moveX < 0 || moveX + 38 >= w) return false;
        that.slider.style.left = moveX + "px";
        var blockLeft = ((w - 40 - 20) / (w - 40)) * moveX;
        that.block.style.left = blockLeft + "px";
        addClass(that.sliderContainer, "sliderContainer_active");
        that.sliderMask.style.width = moveX + "px";
        console.log(that.sliderMask.offsetLeft, 4545);
        trail.push(moveY);
      };

      var handleDragEnd = function (e) {
        if (!isMouseDown) return false;
        isMouseDown = false;
        var eventX = e.clientX || e.changedTouches[0].clientX;
        if (eventX == originX) return false;
        removeClass(that.sliderContainer, "sliderContainer_active");
        that.trail = trail;
        const { left } = that.verify();
        const { prefix } = that.info;
        if (left && prefix) {
          that.success(left, prefix, that);
        } else {
          addClass(that.sliderContainer, "sliderContainer_fail");
          that.fail && that.fail(left, prefix);
          setTimeout(() => {
            that.reset();
          }, 1000);
        }
      };
      this.slider.addEventListener("mousedown", handleDragStart);
      this.slider.addEventListener("touchstart", handleDragStart);
      document.addEventListener("mousemove", handleDragMove);
      document.addEventListener("touchmove", handleDragMove);
      document.addEventListener("mouseup", handleDragEnd);
      document.addEventListener("touchend", handleDragEnd);

      document.addEventListener("mousedown", function () {
        return false;
      });
      document.addEventListener("touchstart", function () {
        return false;
      });
      // this.slider.addEventListener("mousedown");
      // document.addEventListener("mousemove");
      // document.addEventListener("mouseup");
    }

    verify() {
      const arr = this.trail; // 拖动时y轴的移动距离
      const average = arr.reduce(sum) / arr.length; // 平均值
      const deviations = arr.map((x) => x - average); // 偏差数组
      const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length); // 标准差
      const left = parseInt(this.block.style.left);
      return {
        // spliced: Math.abs(left - this.x) < 10,
        // TuringTest: average !== stddev, // 只是简单的验证拖动轨迹，相等时一般为0，表示可能非人为操作
        left,
        // x: this.x,
      };
    }

    reset() {
      this.sliderContainer.className = "sliderContainer";
      this.slider.style.left = 0;
      this.block.style.left = 0;
      this.sliderMask.style.width = 0;
      clear(this);
      // this.initImg();
      this.parent.getImg();
      console.log(this.parent);
    }
  }

  window.jigsaw = {
    init: function (element, success, fail, info, callback) {
      new jigsaw(element, success, fail, info, callback).init();
    },
  };
})(window);