// TODO 履歴の削除を1件ごとにできるようにする
// TODO 見た目が分かりにくいので変えた（Materialize?）

const value = {
  size: {
    width: NaN,
    height: NaN
  },  // 入力されたサイズ
  history: [],  // アスペクト比の履歴
  historyDelayTimer: NaN // 履歴に追加するときのディレイ用タイマー
};

const app = new Vue({
  el: '#app',
  data: value,
  
  created: function() {
    // 履歴をクッキーから呼び出す
    const savedHistory = this.loadHistory();
    if (savedHistory) {
      this.history = savedHistory;
    }
  },
            
  methods: {
    
    /**
     * 最大公約数
     *
     * @param {number} a
     * @param {number} b
     * @return 最大公約数
     */
    gcd(a, b) {
      if (b) {
        return this.gcd(b, a % b);
      }
      else {
        return Math.abs(a);
      }
    },
    
    /**
     * サイズが入力されているか
     *
     * @param {number} width 幅
     * @param {number} height 高さ
     * @return 入力されていたらtrue
     */
    validateSize(width, height) {
      return _.isNumber(width) && !isNaN(width) && _.isNumber(height) && !isNaN(height);
    },
    
    /**
     * 幅と高さからアスペクト比を計算する
     *
     * @param width {number} 幅
     * @param height {number} 高さ
     * @return {Object} アスペクト比
     * @return {Object} byLong 長辺()
     * @return {number} byLong.horizontal 横
     * @return {number} byLong.vertical 縦
     * @return {Object} byShort
     * @return {number} byShort.horizontal
     * @return {number} byShort.vertical
     */
    calcAspectRatio(width, height) {
      let byLong = {
        horizontal: NaN,
        vertical: NaN,
      };
      
      let byShort = {
        horizontal: NaN,
        vertical: NaN,
      }
      
      //　最大公約数を計算して、それで割る
      if (this.validateSize(width, height)) {
        // 横基準
        const gcd = this.gcd(width, height);
        byLong.horizontal = width / gcd;
        byLong.vertical = height / gcd;
        
        // 短辺基準
        if (width >= height) {
          // 幅が長い
          byShort.horizontal = width / height;
          if (byShort.horizontal.toString().length >= 10) {
            // 割り切れなさそうな値は丸める
            byShort.horizontal = Math.round(byShort.horizontal * 100) / 100;
          }
          byShort.vertical = 1;
        }
        else {
          // 縦が長い
          byShort.vertical = height / width;
          if (byShort.vertical.toString().length >= 10) {
            // 割り切れなさそうな値は丸める
            byShort.vertical = Math.round(byShort.vertical * 100) / 100;
          }
          byShort.horizontal = 1;
        }
      }
      
      return {
        byLong,
        byShort
      };
    },
    
    /**
     * 幅と高さをクリア
     *
     */
    clearInput() {
      this.size.width = NaN;
      this.size.height = NaN;
    },
    
    /**
     * 履歴をクッキーに保存
     *
     */
    saveHistory() {
      // カンマ区切りの数字だけにする
      let history = [];
      
      this.history.forEach(function (item, index) {
        history.push([item.index, item.size.width, item.size.height, item.aspectRatio.byLong.horizontal, item.aspectRatio.byLong.vertical, item.aspectRatio.byShort.horizontal, item.aspectRatio.byShort.vertical].join(','));
      });

      Cookies.set('history', history.join('|'));
    },
    
    /**
     * 履歴をクッキーから呼び出す
     *
     * @return 履歴
     */
    loadHistory() {
      const history = [];
      const cookie = Cookies.get('history');
      
      if (cookie) {
        const records = cookie.split('|');  // 1件ごとに区切る
        records.forEach(function (record, index) {
          const items = record.split(',');  // 項目ごとに区切る
          
          // データ形式を復元する
          history.push({
            index: Number(items[0]),
            size: {
              width: Number(items[1]),
              height: Number(items[2])
            },
            aspectRatio: {
              byLong: {
                horizontal: Number(items[3]),
                vertical: Number(items[4])
              },
              byShort: {
                horizontal: Number(items[5]),
                vertical: Number(items[6])
              }
            }
          });
        });
      }
      
      return history;
    },
    
    /**
     * 履歴をクリアする
     *
     */
    clearHistory() {
      // タイマーを止める
      if (!isNaN(this.historyDelayTimer)) {
        clearTimeout(this.historyDelayTimer);
      }
      
      this.history = [];  // 変数をクリア
      Cookies.remove('history');  // Cookieをクリア
    }
  },
  
  computed: {
    
    /**
     * 計算可能か（高さと幅が入力されたか）
     *
     */
    canCalc: function() {
      return this.validateSize(this.size.width, this.size.height);
    },
    
    /**
     * 縦横比
     * 
     */
    result: function() {
      return this.calcAspectRatio(this.size.width, this.size.height);
    },
    
    /**
     * 入力された縦横サイズから、近いアスペクト比のサイズを予想する
     *
     */
    suppose: function() {
      //  幅、高さの前後50ピクセルを総当たりして、一般的なアスペクト比になるものがあれば、そのときの縦横サイズ＆アスペクト比を返す
      // TODO 総当たりは効率が悪いの＆候補が見つからない可能性があるので近い値から計算するようにしたい
      let results = [];
      
      if (this.canCalc === true) {
        const ratioByLong = [this.result.byLong.horizontal, this.result.byLong.vertical];  // 現在の横縦比
        
        // 計算したアスペクト比が一般的なものでなかった場合だけ候補を出す
        if (
          _.difference(ratioByLong, [4, 3]).length !== 0
          && _.difference(ratioByLong, [3, 2]).length !== 0
          && _.difference(ratioByLong, [2, 1]).length !== 0
          && _.difference(ratioByLong, [3, 1]).length !== 0
          && _.difference(ratioByLong, [4, 1]).length !== 0
          && _.difference(ratioByLong, [16, 9]).length !== 0
          && _.difference(ratioByLong, [8, 5]).length !== 0
          && _.difference(ratioByLong, [5, 4]).length !== 0
          && _.difference(ratioByLong, [5, 3]).length !== 0
          && _.difference(ratioByLong, [21, 9]).length !== 0
        ) {
          
          // 一般的なアスペクト比
          // 1:1は計算しなくても分かるので含めない
          let ratios = [
            { w: 4, h: 3 },
            { w: 3, h: 2 },
            { w: 2, h: 1 },
            { w: 3, h: 1 },
            { w: 4, h: 1 },
            { w: 16, h: 9 },
            { w: 8, h: 5 },
            { w: 5, h: 4 },
            { w: 5, h: 3 },
            { w: 21, h: 9 }
          ];
          
          // 縦横比を逆にした比率も設定しておく
          ratios.forEach(function (ratio) {
            ratios.push({ w: ratio.h, h: ratio.w });
          });
          
          
          // 走査する幅を決める（前後10%）
          const range = {
            start: Math.round(this.size.width * 0.9),
            end: Math.round(this.size.width * 1.1)
          };
          
          ratios.forEach(function (ratio) {
            // 結果を計算
            results = results.concat(calcSizeByRatio(ratio.w, ratio.h, range.start, range.end));
          });
          
          // 入力されたサイズに近いサイズから表示したいので、差を計算しておく
          results.forEach((result) => {
            return result.diff = Math.abs(this.size.width - result.width) + Math.abs(this.size.height - result.height);  // 入力されたサイズからの差
          });
          
          // サイズの近いものから取り出す
          results = results
            .sort(function (a, b) {
              return a.diff - b.diff;
              // return a.diff > b.diff; // chromeで機能しない
            })
            .filter(function (element, index) {
              return index < 5;
            });
        }
      }
      
      return results;
    }
  },
  
  watch: {
    result: function() {
      if (!isNaN(this.historyDelayTimer)) {
        clearTimeout(this.historyDelayTimer);
      }
      
      // サイズが変わってしばらくたったら履歴に追加する
      if (this.canCalc) {
        this.historyDelayTimer = setTimeout(() => {
          this.historyDelayTimer = NaN;
          
          // 履歴に追加
          if (this.history.length === 0 || (!_.isEqual(this.size, this.history[0].size) || !_.isEqual(this.result, this.history[0].aspectRatio))) {
            // 最初の1件 or 前回と違っていたら履歴に追加
            this.history.unshift({
              index: this.history.length + 1,
              size: {
                width: this.size.width,
                height: this.size.height
              },
              aspectRatio: {
                byLong: {
                  horizontal: this.result.byLong.horizontal,
                  vertical: this.result.byLong.vertical
                },
                byShort: {
                  horizontal: this.result.byShort.horizontal,
                  vertical: this.result.byShort.vertical
                }
              }
            });
            
            this.saveHistory();
          }
        }, 3000);
      }
    }
  }
});


/**
 * 比率で割り切れるサイズを計算する
 * 
 * @param ratioWidth {number} 幅の比率
 * @param ratioHeight {number} 高さの比率
 * @param start {number} 開始幅
 * @param end {number} 終了幅
 * @return {array} 検索結果
 * @return .width {number} 幅
 * @return .height {number} 高さ
 * @return .byLong {Object} 横縦比
 * @return .byLong.horizontal {number} 横縦比の横
 * @return .byLong.vertical {number} 横縦比の縦
 * @return .byShort {Object} 縦横比
 * @return .byShort.horizontal {number} 縦横比の横
 * @return .byShort.vertical {number} 縦横比の縦
 */
function calcSizeByRatio(ratioWidth, ratioHeight, startWidth, endWidth) {
  let result = [];  // 結果
  
  // start, endは整数にする
  const start = Math.floor(startWidth);
  const end = Math.ceil(endWidth);
  
  // 計算用の比率
  const ratio = ratioHeight / ratioWidth;

  const byLong = {
    horizontal: ratioWidth,
    vertical: ratioHeight
  };  // 横縦比
  const byShort = ratioWidth > ratioHeight ? {
    horizontal: Math.round(ratioWidth / ratioHeight * 100) / 100,
    vertical: 1
  } : {
    horizontal: 1,
    vertical: Math.round(ratioHeight / ratioWidth * 100) / 100
  };  // 短辺を1とした比率
  
  for (let i = start; i < end; i++) {
    const h = i * (ratioHeight / ratioWidth);
    if (h === Math.floor(h) && h !== 0) {
      //高さが割り切れるなら結果に追加
      result[result.length] = {
        width: i,
        height: h,
        byLong,
        byShort
      };
    }
  }
  
  return result;
}