class MinVue {
  constructor(options) {
    this.$data = options.data;
    this.$methods = options.methods;
    this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : el;

    this.bindData(this.$data);
    new Observer(this.$data);
    new Compile(this);
  }

  bindData(data) {
    Object.keys(data).forEach(key => {
      // 为什么用object.defineProperty而不是直接给this.key赋值？
      /*
       *当value值为基本数据类型时，this.key数据变化，对用的$data不会变化
       *只有当value值为对象或者数组类型时，数据变化会同步
       **/
      Object.defineProperty(this, key, {
        enumerable: true,
        configurable: true,
        get: () => {
          return data[key];
        },
        set: newValue => {
          data[key] = newValue;
        },
      });
    });
  }
}

class Observer {
  constructor(data) {
    this.work(data);
  }

  work(data) {
    if (Object.prototype.toString.call(data) === '[object Object]') {
      Object.keys(data).forEach(key => {
        this.defineReactive(data, key, data[key]);
      });
    }
  }

  defineReactive(data, key, value) {
    const observer = this;
    const dep = new Dep();

    // 当value为对象时，递归调用
    this.work(value);

    // 收集依赖，依赖存在Dep类上
    // 为什么使用Dep.target这种形式去获取依赖

    /*
     *当一个变量需要影响多个元素时，即一个变量变化需要响应多个元素内容的变化
     *先记录下所有的依赖
     */
    Object.defineProperty(data, key, {
      enumerable: true,
      configurable: true,
      get: () => {
        if (Dep.target) {
          dep.add(Dep.target);
        }
        return value;
      },
      set: newValue => {
        value = newValue;
        // 赋新值后，新值有可能为对象，重新绑定get set方法
        observer.work(newValue);
        dep.notify();
      },
    });
  }
}

class Dep {
  constructor() {
    this.watcher = new Set();
  }

  add(watcher) {
    if (watcher && watcher.update) this.watcher.add(watcher);
  }

  notify() {
    this.watcher.forEach(watch => watch.update());
  }
}

class Watcher {
  constructor(vm, key, cb) {
    Dep.target = this;
    this.vm = vm;
    this.key = key;
    // 会触发Observer定义的getter方法，收集Dep.target
    this._old = vm.$data[key];
    this.cb = cb;
    Dep.target = null;
  }

  update() {
    const newValue = this.vm.$data[this.key];
    this.cb(newValue);
    this._old = newValue;
  }
}

class Compile {
  constructor(vm) {
    this.vm = vm;
    this.methods = vm.$methods;
    this.compile(vm.$el);
  }

  compile(el) {
    const childNodes = el.childNodes;

    Array.from(childNodes).forEach(node => {
      if (this.isTextNode(node)) {
        this.compileTextNode(node);
      } else if (this.isElementNode(node)) {
        this.compileElement(node);
      }

      if (node.childNodes && node.childNodes.length) this.compile(node);
    });
  }

  isTextNode(node) {
    return node.nodeType === 3;
  }

  isElementNode(node) {
    return node.nodeType === 1;
  }

  compileTextNode(node) {
    // .+?正则懒惰匹配
    const reg = /\{\{(.+?)\}\}/g;
    const text = node.textContent;

    if (reg.test(text)) {
      let key = RegExp.$1.trim();

      // 只考虑了第一层key的情况 多层key?
      node.textContent = text.replace(reg, this.vm[key]);

      new Watcher(this.vm, key, newValue => {
        node.textContent = newValue;
      });
    }
  }

  compileElement(node) {
    const attrs = node.attributes;

    if (attrs.length) {
      Array.from(attrs).forEach(attr => {
        if (this.isDirective(attr.name)) {
          // 根据v-来截取一下后缀属性名
          let attrName = attr.name.indexOf(':') > -1 ? attr.name.substr(5) : attr.name.substr(2);
          let key = attr.value;

          this.update(node, attrName, key, this.vm[key]);
        }
      });
    }
  }

  isDirective(dir) {
    return dir.startsWith('v-');
  }

  update(node, attrName, key, value) {
    if (attrName === 'text') {
      node.textContent = value;
      new Watcher(this.vm, key, newValue => {
        node.textContent = newValue;
      });
    } else if (attrName === 'model') {
      node.value = value;
      new Watcher(this.vm, key, newValue => {
        node.value = newValue;
      });

      node.addEventListener('input', e => {
        this.vm[key] = node.value;
      });
    } else if (attrName === 'click') {
      node.addEventListener(attrName, this.methods[key].bind(this.vm));
    }
  }
}