const defaultValue = {
  ratio: {
    width: 4,
    height: 3
  },
  option: {
    start: 100
  },
  rows: 100,
  // 無限スクロール用のインスタンス
  intersectionObserver: undefined,
  results: []
};
let data;

try {
  // 設定がcookieにあれば復元する
  // Firefoxで 'The operation is insecure. js.cookie' になるのでtryで回避する
  const loadSetteings = Cookies.getJSON('settings');

  // Object.assignだとobjectの値がないのも上書きされてしまうので、_.merge()を使う
  data = _.merge(defaultValue, loadSetteings);
} catch (e) {
  data = defaultValue;
}


const app = new Vue({
  el: '#app',
  data,

  mounted() {
    console.log('mounted');
    const observer = new IntersectionObserver(this.handleIntersect, {
      root: null, // page root
      rootMargin: '0px',
      threshold: 1
    });
    this.intersectionObserver = observer;

    this.setupIntersect();
  },

  computed: {
    /**
     * 計算結果
     *
     */
    results() {
      let sizes = calcSizeByRatio(parseFloat(this.ratio.width), parseFloat(this.ratio.height), this.option.start, this.rows);  // 計算結果

      // 結果にindex、画素数を付加する
      sizes.forEach(function (val, index) {
        val.index = index + 1;
        val.resolution = val.width * val.height;
      });

      return sizes;
    }
  },

  methods: {
    /**
     * アスペクト比を変更する
     *
     * @param ratioWidth 幅の比率
     * @param ratioHeight 縦の比率
     */
    changeRatio(ratioWidth, ratioHeight) {
      this.ratio.width = ratioWidth;
      this.ratio.height = ratioHeight;
    },


    /**
     * 開始幅を増減する
     *
     * @param value {number} 増減値
     */
    addStartWidth(value) {
      this.option.start += value;
    },

    /**
     * 設定をクッキーに保存する
     *
     */
    saveSettings() {
      try {
        Cookies.set('settings', {
          ratio: this.ratio,
          option: {
            start: this.option.start
          }
        }, {
          expires: 7
        });
      } catch (e) {
        console.error(e);
      }
    },

    /**
     * 件数を増やす
     */
    incrementRows() {
      this.rows = this.rows + 100;
    },

    /**
     * 件数をリセット
     */
    resetRows() {
      this.rows = 100;
    },

    /**
     * 無限スクロールの設定
     */
    setupIntersect() {
      const targets = document.querySelectorAll('.collection-item');
      const len = targets.length - 1;

      // 1000件まで無限スクロール
      // 件数増えるとレンダリング？で結構重くなるので
      if (this.rows < 1000) {
        this.intersectionObserver.observe(targets[len]);
      }
    },

    /**
     * 閾値をまたいだ
     * 
     * @param entries
     * @param observer
     */
    handleIntersect(entries, observer) {
      console.log('handleIntersect', entries, observer);
      entries.forEach((entry) => {
        console.log('entry', entry);
        if (Math.round(entry.intersectionRatio * 100) / 100 >= 0.75) {
          // 件数を増やす
          this.incrementRows();

          observer.unobserve(entry.target);
        }
      });
    },

    /**
     * 設定をデフォルトに設定する
     *
     */
    clearSettings () {
      Cookies.remove('settings');

      this.ratio.width = defaultValue.ratio.width;
      this.ratio.height = defaultValue.ratio.height;
      this.option.start = defaultValue.option.start;
    },

    /**
     * ページトップに戻る
     */
    awardPageTop () {
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    }
  },

  filters: {

    /**
     * 数値を丸める
     *
     * @param num 数値
     * @return {string} 3桁区切りの文字列
     */
    about(num) {
      let result = `${num}`;
      // 1K 1,000
      // 1M 1,000,000
      // 1B 1,000,000,000
      // 1T 1,000,000,000,000
      if (num > 1000000000000) {
        let number = Math.round(num / 1000000000000 * 10) / 10;
        result = `${String(number).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,')} T`;  // 数値はカンマ区切り
      }
      else if (num > 1000000000) {
        result = `${Math.round(num / 1000000000 * 10) / 10} B`;
      }
      else if (num > 1000000) {
        result = `${Math.round(num / 1000000 * 10) / 10} M`;
      }
      else if (num > 1000) {
        result = `${Math.round(num / 1000 * 10) / 10} K`;
      }

      return result;
    },

    /**
     * 3桁ごとにカンマ区切り
     *
     * @param num 数値
     * @return {string} 3桁区切りの文字列
     */
    comma(num) {
      return String(num).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
    }
  },

  watch: {
    'ratio.width': function () {
      this.resetRows();
      this.saveSettings();
    },

    'ratio.height': function () {
      this.resetRows();
      this.saveSettings();
    },

    'option.start': function () {
      this.resetRows();
      this.saveSettings();
    },

    'results': function () {
      Vue.nextTick(() => {
        this.setupIntersect();
      });
    }
  }
});



/**
 * 比率で割り切れるサイズを計算する
 * 
 * @param ratioWidth {number} 幅の比率
 * @param ratioHeight {number} 高さの比率
 * @param width {number} 幅のピクセル数
 * @param number {number} 件数
 * @return 検索結果
 */
function calcSizeByRatio(ratioWidth = 4, ratioHeight = 3, width = 100, number) {
  let result = [];  // 結果
  let count = 0;  // 見つかった件数
  const limitWidth = width + 1000000; // 検索を終了させる幅。結果の件数が指定より少ない場合に無限ループになるのを回避するため
  const ratio = ratioHeight / ratioWidth;

  if (ratioWidth > 0 && ratioHeight > 0) {
    // 件数に満たない場合も、明らかに見つからない場合はループを終了させる
    for (let i = width; count < number && i <= limitWidth; i++) {
      let h = i * ratio;
      if (h === Math.floor(h) && h !== 0) {
        //高さが割り切れるなら結果に追加
        result[result.length] = {
          width: i,
          height: h
        };
        count++;
      }
    }
  }

  return result;
}