/*
    # Class List
        * ViewModelValue
        * ViewModelListener
        * ViewModel
*/
const ViewModelValue = class {
    category; k; v;
    constructor(subKey, category, k, v) {
        this.category = category;
        this.k = k;
        this.v = v;
        Object.freeze(this)
    }
}

const ViewModelListener = class {
    viewmodelUpdated(updated){ throw 'override'; }
}

const ViewModel = class extends ViewModelListener {
    static get = data => new ViewModel(data);
    static #subjects = new Set;
    static #inited = false;
    static notify(vm) {
        this.#subjects.add(vm);
        if (this.#inited) return
        this.#inited = true;
        const f = () => {
            this.#subjects.forEach(vm => {
                if (vm.#isUpdated.size) {
                    vm.notify();
                    vm.#isUpdated.clear();
                }
            })
            requestAnimationFrame(f);
        }
        requestAnimationFrame(f);
    }
    static descriptor = (vm, category, k, v) => ({
        enumerable: true,
        get: () => v,
        set(newV) {
            v = newV;
            //POINT4.2 defineProperties set정의
            vm.#isUpdated.add(new ViewModelValue(category, k, v))
        }
    })

    static define = (vm, category, obj) => (
        //POINT4.1 reducing
        Object.defineProperties(obj,
            Object.entries(obj).reduce((r, [k, v]) => (r[k] = ViewModel.descriptor(vm, category, k, v), r), {})
        )
    )

    subKey = '', parent = null;
    styles = {}, attributes = {}, properties = {}, events = {};
    //POINT1: #isUpdated, #listeners
    #isUpdated = new Set, #listeners = new Set;

    constructor(data, _ = type(data, 'object')) {
        super();
        //POTIN4: 중복을 없앴다.
        Object.entries(data).forEach(([k, v]) => {
            if ('styles,attributes,properties'.includes(k)) {
                if (!v || typeof v != 'object') throw `invalid object k: ${k}, v:${v}`
                this[k] = ViewModel.define(this, k, v);
            } else {
                Object.defineProperty(this, k, ViewModel.descriptor(this, '', k, v))
                if (v instanceof ViewModel) {
                    v.parent = this;
                    v.subKey = k;
                    v.addListener(this);
                }
            }
        })
        //
        ViewModel.notify(this);
        Object.seal(this);
    }

    viewmodelUpdated(updated){ updated.forEach(v => this.#isUpdated.add(v));}
    //POINT2: addListener, removeListener method
    addListener(v, _ = type(v, ViewModelListener)){ this.#listeners.add(v);}
    removeListener(v, _ = type(v, ViewModelListener)){ this.#listeners.delete(v);}
    //POINT3: notify method
    notify(){ this.#listeners.forEach(v => v.viewmodelUpdated(this.#isUpdated));}
}

   new ViewModelValue(vm.subKey, category, k, v))

/*
    #index class
    * ViewModelValue
    * ViewModelListener
    * ViewModel
*/
const ViewModelValue = class {
    //POINT3: subKey
    subKey; category; k; v;
    constructor(subKey, category, k, v) {
        this.subKey = subKey;
        this.category = category;
        this.k = k;
        this.v = v;
        Object.freeze(this)
    }
}

const ViewModelListener = class {
    viewmodelUpdated(updated){ throw 'override'; }
}

const ViewModel = class extends ViewModelListener {
    static get = data => new ViewModel(data);
    static #subjects = new Set;
    static #inited = false;
    //POINT5.1 notify: observer에게 통보할 subjects들이 모인 곳
    // vm.notify는 결국 v.viewmodelUpdated를 통해서 binder의 viewmodelupdated를 통해서 el을 변경한다 !!!
    static notify(vm) {
        this.#subjects.add(vm);
        if (this.#inited) return
        this.#inited = true;
        const f = () => {
            this.#subjects.forEach(vm => {
                if (vm.#isUpdated.size) {   //업데이트 여부 확인
                    vm.notify();            //vm이 가지고 있는 Listener들에게 notify
                    vm.#isUpdated.clear();  //notify한 것은 제거 해준다.
                }
            })
            requestAnimationFrame(f);
        }
        requestAnimationFrame(f);
    }
    static descriptor = (vm, category, k, v) => ({
        enumerable: true,
        get: () => v,
        set(newV) {
            v = newV;
            //POINT4 vm.subKey 추가: 자식이자 자신입을 알려주기 위해서
            vm.#isUpdated.add(new ViewModelValue(vm.subKey, category, k, v))
        }
    })

    static define = (vm, category, obj) => (
        Object.defineProperties(obj,
            Object.entries(obj).reduce((r, [k, v]) => (r[k] = ViewModel.descriptor(vm, category, k, v), r), {})
        )
    )

    subKey = '', parent = null;
    styles = {}, attributes = {}, properties = {}, events = {};
    #isUpdated = new Set, #listeners = new Set;

    constructor(data, _ = type(data, 'object')) {
        super();
        Object.entries(data).forEach(([k, v]) => {
            if ('styles,attributes,properties'.includes(k)) {
                if (!v || typeof v != 'object') throw `invalid object k: ${k}, v:${v}`
                this[k] = ViewModel.define(this, k, v);
            } else {
                //POINT1: el의 wrapper, title, contents
                Object.defineProperty(this, k, ViewModel.descriptor(this, '', k, v))
                if (v instanceof ViewModel) {
                    //부모자식 개념이 생겼다.
                    v.parent = this;      //부모
                    v.subKey = k;         //subKey가 누구 소속일때 할당(부모를 알게 된다), 없는건 root
                    v.addListener(this);  //자식의 Listener가 되는 코드(자식이 변화 했을때 변화를 알아차려 나의 일부의 변화로 포함 시킬 수 있다. )
                }
                //
            }
        })
        //POINT5: ViewModel.notify
        ViewModel.notify(this); //ViewModel이 새로 만들어졌을때 변경됐다고 알려준다.(ViewModel기준으로 ViewModel이 바뀌면 한번만)
        Object.seal(this);
    }

    //POINT2: viewmodelUpdated
    viewmodelUpdated(updated){ updated.forEach(v => this.#isUpdated.add(v));}
    addListener(v, _ = type(v, ViewModelListener)){ this.#listeners.add(v);}
    removeListener(v, _ = type(v, ViewModelListener)){ this.#listeners.delete(v);}
    notify(){ this.#listeners.forEach(v => v.viewmodelUpdated(this.#isUpdated));}
}

const Binder = class extends ViewModelListener {
  #items = new Set()
  #processors = {}

  //POINT2: 공포의 Listener를 구현
  viewmodelUpdated(updated) {
    const items = {}
    this.#items.forEach(({ vmName, el }) => {
      items[vmName] = [type(rootViewModel[vmName], ViewModel), el]
    })
    updated.forEach(({ subKey, category, k, v }) => {
      if (!items[subKey]) return
      const [vm, el] = items[subKey],
        processor = this.#processors[category]
      if (!el || !processor) return
      processor.process(vm, el, k, v)
    })
  }

  add(v, _ = type(v, BinderItem)) {
    this.#items.add(v)
  }
  addProcessor(v, _ = type(v, Processor)) {
    this.#processors[v.category] = v
  }
  render(viewmodel, _ = type(viewmodel, ViewModel)) {
    const processores = Object.entries(this.#processors)
    this.#items.forEach(({ vmName, el }) => {
      const vm = type(viewmodel[vmName], ViewModel)
      processores.forEach(([pk, processor]) => {
        Object.entries(vm[pk]).forEach(([k, v]) => {
          processor.process(vm, el, k, v)
        })
      })
    })
  }
  //POINT1: 특정 ViewModel에 listener에 등록되고 말고를 결정한다.
  watch(viewmodel, _ = type(viewmodel, ViewModel)) {
    viewmodel.addListener(this)
    this.render(viewmodel)
  }
  unwatch(viewmodel, _ = type(viewmodel, ViewModel)) {
    viewmodel.removeListener(this)
  }
}

const Scanner = class {
  scan(el, _ = type(el, HTMLElement)) {
    const binder = new Binder()
    this.checkItem(binder, el)
    const stack = [el.firstElementChild]
    let target
    while ((target = stack.pop())) {
      this.checkItem(binder, target)
      if (target.firstElementChild) stack.push(target.firstElementChild)
      if (target.nextElementSibling) stack.push(target.nextElementSibling)
    }
    return binder
  }
  checkItem(binder, el) {
    const vmName = el.getAttribute("data-viewmodel")
    if (vmName) binder.add(new BinderItem(el, vmName))
  }
}

const scanner = new Scanner()
const binder = scanner.scan(document.querySelector("#target"))
binder.addProcessor(
  new (class extends Processor {
    _process(vm, el, k, v) {
      el.style[k] = v
    }
  })("styles")
)
binder.addProcessor(
  new (class extends Processor {
    _process(vm, el, k, v) {
      el.setAttribute(k, v)
    }
  })("attributes")
)
binder.addProcessor(
  new (class extends Processor {
    _process(vm, el, k, v) {
      el[k] = v
    }
  })("properties")
)
binder.addProcessor(
  new (class extends Processor {
    _process(vm, el, k, v) {
      el[`on${k}`] = e => v.call(el, e, vm)
    }
  })("events")
)

const getRandom = () => parseInt(Math.random() * 150) + 100
const wrapper = ViewModel.get({
  styles: {
    width: "50%",
    background: "#ffa",
    cursor: "pointer",
  },
  events: {
    click(e, vm) {
      vm.parent.isStop = true
    },
  },
})
const title = ViewModel.get({
  properties: {
    innerHTML: "Title",
  },
})
const contents = ViewModel.get({
  properties: {
    innerHTML: "Contents",
  },
})
const rootViewModel = ViewModel.get({
  isStop: false,
  changeContents() {
    this.wrapper.styles.background = `rgb(${getRandom()},${getRandom()},${getRandom()})`
    this.contents.properties.innerHTML = Math.random()
      .toString(16)
      .replace(".", "")
  },
  wrapper,
  title,
  contents,
})
binder.watch(rootViewModel)
const f = () => {
  rootViewModel.changeContents()
  if (!rootViewModel.isStop) requestAnimationFrame(f)
}
requestAnimationFrame(f)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>MVVM</title>
  </head>

  <body>
    <section id="target" data-viewmodel="wrapper">
      <h2 data-viewmodel="title"></h2>
      <section data-viewmodel="contents"></section>
    </section>
    <script>
      const type = (target, type) => {
        if (typeof type == "string") {
          if (typeof target != type) throw `invalid type ${target} : ${type}`
        } else if (!(target instanceof type)) {
          throw `invalid type ${target} : ${type}`
        }
        return target
      }

      const ViewModelListener = class {
        viewmodelUpdated(updated) {
          throw "override"
        }
      }

      const ViewModel = class extends ViewModelListener {
        static get = data => new ViewModel(data)
        static #subjects = new Set()
        static #inited = false
        static notify(vm) {
          this.#subjects.add(vm)
          if (this.#inited) return
          this.#inited = true
          const f = () => {
            this.#subjects.forEach(vm => {
              if (vm.#isUpdated.size) {
                vm.notify()
                vm.#isUpdated.clear()
              }
            })
            requestAnimationFrame(f)
          }
          requestAnimationFrame(f)
        }
        static descriptor = (vm, category, k, v) => ({
          enumerable: true,
          get: () => v,
          set(newV) {
            v = newV
            vm.#isUpdated.add(new ViewModelValue(vm.subKey, category, k, v))
          },
        })

        static define = (vm, category, obj) =>
          Object.defineProperties(
            obj,
            Object.entries(obj).reduce(
              (r, [k, v]) => (
                (r[k] = ViewModel.descriptor(vm, category, k, v)), r
              ),
              {}
            )
          )

        subKey = ""
        parent = null
        styles = {}
        attributes = {}
        properties = {}
        events = {}
        #isUpdated = new Set()
        #listeners = new Set()

        constructor(data, _ = type(data, "object")) {
          super()
          Object.entries(data).forEach(([k, v]) => {
            if ("styles,attributes,properties".includes(k)) {
              if (!v || typeof v != "object")
                throw `invalid object k: ${k}, v:${v}`
              this[k] = ViewModel.define(this, k, v)
            } else {
              Object.defineProperty(
                this,
                k,
                ViewModel.descriptor(this, "", k, v)
              )
              if (v instanceof ViewModel) {
                v.parent = this
                v.subKey = k
                v.addListener(this)
              }
            }
          })
          ViewModel.notify(this)
          Object.seal(this)
        }

        viewmodelUpdated(updated) {
          updated.forEach(v => this.#isUpdated.add(v))
        }
        addListener(v, _ = type(v, ViewModelListener)) {
          this.#listeners.add(v)
        }
        removeListener(v, _ = type(v, ViewModelListener)) {
          this.#listeners.delete(v)
        }
        notify() {
          this.#listeners.forEach(v => v.viewmodelUpdated(this.#isUpdated))
        }
      }

      const ViewModelValue = class {
        subKey
        category
        k
        v
        constructor(subKey, category, k, v) {
          this.subKey = subKey
          this.category = category
          this.k = k
          this.v = v
          Object.freeze(this)
        }
      }

      const BinderItem = class {
        el
        vmName
        constructor(
          el,
          vmName,
          _0 = type(el, HTMLElement),
          _1 = type(vmName, "string")
        ) {
          this.el = el
          this.vmName = vmName
          Object.freeze(this)
        }
      }

      const Binder = class extends ViewModelListener {
        #items = new Set()
        #processors = {}
        viewmodelUpdated(updated) {
          const items = {}
          this.#items.forEach(({ vmName, el }) => {
            items[vmName] = [type(rootViewModel[vmName], ViewModel), el]
          })
          updated.forEach(({ subKey, category, k, v }) => {
            if (!items[subKey]) return
            const [vm, el] = items[subKey],
              processor = this.#processors[category]
            if (!el || !processor) return
            processor.process(vm, el, k, v)
          })
        }

        add(v, _ = type(v, BinderItem)) {
          this.#items.add(v)
        }
        addProcessor(v, _ = type(v, Processor)) {
          this.#processors[v.category] = v
        }
        render(viewmodel, _ = type(viewmodel, ViewModel)) {
          const processores = Object.entries(this.#processors)
          this.#items.forEach(({ vmName, el }) => {
            const vm = type(viewmodel[vmName], ViewModel)
            processores.forEach(([pk, processor]) => {
              Object.entries(vm[pk]).forEach(([k, v]) => {
                processor.process(vm, el, k, v)
              })
            })
          })
        }
        watch(viewmodel, _ = type(viewmodel, ViewModel)) {
          viewmodel.addListener(this)
          this.render(viewmodel)
        }
        unwatch(viewmodel, _ = type(viewmodel, ViewModel)) {
          viewmodel.removeListener(this)
        }
      }

      const Processor = class {
        category
        constructor(category) {
          this.category = category
          Object.freeze(this)
        }
        process(
          vm,
          el,
          k,
          v,
          _0 = type(vm, ViewModel),
          _1 = type(el, HTMLElement),
          _2 = type(k, "string")
        ) {
          this._process(vm, el, k, v)
        }
        _process(vm, el, k, v) {
          throw "override"
        }
      }

      const Scanner = class {
        scan(el, _ = type(el, HTMLElement)) {
          const binder = new Binder()
          this.checkItem(binder, el)
          const stack = [el.firstElementChild]
          let target
          while ((target = stack.pop())) {
            this.checkItem(binder, target)
            if (target.firstElementChild) stack.push(target.firstElementChild)
            if (target.nextElementSibling) stack.push(target.nextElementSibling)
          }
          return binder
        }
        checkItem(binder, el) {
          const vmName = el.getAttribute("data-viewmodel")
          if (vmName) binder.add(new BinderItem(el, vmName))
        }
      }

      const scanner = new Scanner()
      const binder = scanner.scan(document.querySelector("#target"))
      binder.addProcessor(
        new (class extends Processor {
          _process(vm, el, k, v) {
            el.style[k] = v
          }
        })("styles")
      )
      binder.addProcessor(
        new (class extends Processor {
          _process(vm, el, k, v) {
            el.setAttribute(k, v)
          }
        })("attributes")
      )
      binder.addProcessor(
        new (class extends Processor {
          _process(vm, el, k, v) {
            el[k] = v
          }
        })("properties")
      )
      binder.addProcessor(
        new (class extends Processor {
          _process(vm, el, k, v) {
            el[`on${k}`] = e => v.call(el, e, vm)
          }
        })("events")
      )

      const getRandom = () => parseInt(Math.random() * 150) + 100
      const wrapper = ViewModel.get({
        styles: {
          width: "50%",
          background: "#ffa",
          cursor: "pointer",
        },
        events: {
          click(e, vm) {
            vm.parent.isStop = true
          },
        },
      })
      const title = ViewModel.get({
        properties: {
          innerHTML: "Title",
        },
      })
      const contents = ViewModel.get({
        properties: {
          innerHTML: "Contents",
        },
      })
      const rootViewModel = ViewModel.get({
        isStop: false,
        changeContents() {
          this.wrapper.styles.background = `rgb(${getRandom()},${getRandom()},${getRandom()})`
          this.contents.properties.innerHTML = Math.random()
            .toString(16)
            .replace(".", "")
        },
        wrapper,
        title,
        contents,
      })
      binder.watch(rootViewModel)
      const f = () => {
        rootViewModel.changeContents()
        if (!rootViewModel.isStop) requestAnimationFrame(f)
      }
      requestAnimationFrame(f)
    </script>
  </body>
</html>