class Counter {
  /**
   * @param {Number} count
   */
  constructor(count = 0) {
    this.count = count;
  }

  countUp() {
    this.count++;
    return this._update(this);
  }

  countDown() {
    this.count--;
    return this._update(this);
  }

  /**
   * 更新した新しいインスタンスを返す
   * @param {Counter} updated
   */
  _update(updated) {
    return new Counter(updated.count);
  }
}

class CounterFactory {
  static createFromLocalStorage(counter) {
    let count = 0;
    if (!counter) {
      return new Counter(count);      
    }

    if (typeof counter.count !== 'number') {
      count = 0;
    } else {
      count = counter.count;
    }
    return new Counter(count);      
  }
}

class LocalStorage {
  /**
   * ローカストレージから値を取得する
   * @param {String} name
   * @return {Promise}
   */
  get (name) {
    return localforage.getItem(name);
  }

  /**
   * ローカストレージへ値を入れる
   * @param {String} name
   * @param {*} value
   * @return {Promise}
   */
  set (name, value) {
    return localforage.setItem(name, value);
  }
}

const REPOSITORY_CHANGE = 'REPOSITORY_CHANGE'; // Repository内部のemit名
class CounterRepository extends EventEmitter {
  /**
   * @param {Map} memory
   * @param {LocalStorage} localStorage
   */
  constructor(memory = new Map(), localStorage = new LocalStorage()) {
    super();
    this._memory = memory;
    this._localStorage = localStorage;
  }

  /**
   * ローカルストレージに格納されている
   * カウンターを取り出す
   */
  async getLocalStorageData () {
    return await this._localStorage.get('counter');
  }

  /**
   * メモリ上に永続化されたカウンタードメインを返す
   */
  getCounter () {
    return this._memory.get('counter')
  }

  /**
   * カウンタードメイン永続化
   * @param {Counter} counter
   */
  save (counter) {
    this._memory.set('counter', counter);
    this._localStorage.set('counter', counter);
    this.emit(REPOSITORY_CHANGE, counter);
  }

  /**
   * emitterへハンドラ設定
   * @param {Function} handler
   */
  onChange(handler) {
    this.on(REPOSITORY_CHANGE, handler);
  }
}

// リポシトリーのシングルトン
const counterRepository = new CounterRepository();

// UseCase
class CounterUseCase {
  /**
   * @param {CounterRepository} counterRepository
   */
  constructor(counterRepository) {
    this.counterRepository = counterRepository;
  }

  /**
   * CounterUseCaseを作って返す
   */
  static create() {
    return new CounterUseCase(counterRepository);
  }

  /**
   * ローカルストレージから値を取得して、初期化する
   * 1.ローカルストレージから値を取得する
   * 2.取得した値を使ってドメインを作成する
   * 3.作成したドメインを永続化する
   */
  async initialize() {
    const value = await this.counterRepository.getLocalStorageData();
    const counter = CounterFactory.createFromLocalStorage(value);
    this.counterRepository.save(counter);
  }

  /**
   * 値を一つ足す
   * 1.Repositoryから永続化されたドメインを取得する
   * 2.ドメインのcountUpメソッドを呼び出し、更新したドメインを取得する
   * 3.更新したドメインを永続化する
   */
  countUp() {
    let counter = this.counterRepository.getCounter()
    counter = counter.countUp();
    this.counterRepository.save(counter);
  }

  /**
   * 値を一つ引く
   * 1.Repositoryから永続化されたドメインを取得する
   * 2.ドメインのcountDownメソッドを呼び出し、更新したドメインを取得する
   * 3.更新したドメインを永続化する
   */
  countDown() {
    let counter = this.counterRepository.getCounter()
    counter = counter.countDown();
    this.counterRepository.save(counter);
  }
}

const VuePresenter = Vue.component('VuePresenter', {
  template: `
<div>
  <p>カウント：{{ count }}</p>
  <button @click="onClickCountUp">countUp</button>
  <button @click="onClickCountDown">countDown</button>
</div>
`,
  data () {
    return {
      count: null
    }
  },
  beforeCreate() {
    // Domainを初期化
    CounterUseCase.create().initialize();
  },
  created() {
    // Repositoryを購読
    counterRepository.onChange(counter => {
      this.count = counter.count;
    })
  },
  methods: {
    onClickCountUp() {
      CounterUseCase.create().countUp();
    },
    onClickCountDown() {
      CounterUseCase.create().countDown();
    }
  }
})

// render
new Vue({
  el: '#vue-app',
  template: '<VuePresenter />'
})

class ReactPresenter extends React.Component {
  constructor() {
    super();
    this.state = {
      count: null
    };
  }

  componentWillMount() {
    // Domainを初期化
    CounterUseCase.create().initialize();

    // Repositoryを購読
    counterRepository.onChange(counter => {
      this.setState({
        count: counter.count
      })
    })
  }

  onClickCountUp() {
    CounterUseCase.create().countUp();
  }

  onClickCountDown() {
    CounterUseCase.create().countDown();
  }

  render () {
    return (
      <div>
        <p>カウント：{ this.state.count }</p>
        <button onClick={() => this.onClickCountUp()}>countUp</button>
        <button onClick={() => this.onClickCountDown()}>countDown</button>
      </div>
    )
  }
}

// render
ReactDOM.render(
  <ReactPresenter />,
  document.getElementById('react-app')
);