const settings = {
  bright: 140 // 明るい色と判断する輝度（文字などを暗くする）
};


// state初期値
const initialState = {
  hex: null,  // 色（hex）
  label: null, // 色名
  keywords: '', // 検索キーワード
  isNotFound: false // 検索ワードで見つからなかった
};


/**
 * HEXからRGBに変換する
 *
 * @param {string} hex HEXカラー
 * @return {number[]} [R, G, B]
 */
function hexToRgb (hex) {
  return [
    parseInt((hex).substring(0, 2), 16),
    parseInt((hex).substring(2, 4), 16),
    parseInt((hex).substring(4, 6), 16)
  ];
}

/**
 * RGBの近い色を取得する
 *
 *
 *
 */
function near (rgb) {
  
}

// DOMからHEX, RGBを取得しておく
const colorPreview = document.querySelectorAll('.color__preview') || [];
const colors = [];
colorPreview.forEach(function (node) {
  const hex = node.dataset.hex;
  colors.push({
    label: node.dataset.name,
    hex,
    rgb: hexToRgb(hex)
  });
});

console.log('colors', colors);


const app = new Vue({
  el: '#app',
  data: initialState,
  
  mounted: function () {
    // ESCキーで選択を解除
    document.addEventListener('keydown', (e) => {
      if (e.keyCode === 27) {
        // ESC
        this.clear();
      }
    });
  },
  
  methods: {
    
    /**
     * 色を選択する
     *
     * @param {string} hex HEXカラー
     * @param {string} label 色のラベル
     */
    selectColor: function (hex, label) {
      this.hex = hex;
      this.label = label.split('|');
    },
    
    /**
     * 色を検索する
     *
     * @param {string} keywords 検索ワード
     */
    search: function (keywords) {
      this.keywords = keywords;
    },
    
    /**
     * 選択を解除
     *
     */
    clear: function () {
      this.hex = null;
    },
    
    /**
     * RGBから輝度を計算する
     *
     * @param {number[]} rgb [r, g, b]
     */
    brightness: function (rgb) {
      const r = 0.298912;
      const g = 0.586611;
      const b = 0.114478;
      return Math.floor(r * rgb[0] + g * rgb[1] + b * rgb[2]);
    },
    
    /**
     * 小数点を0〜255にする
     *
     * @param {number} num 数字
     * @return {number} 0 - 255に変換した数字
     */
    decimalToHex: function (num) {
      if (String(num).match(/^-?\d\.\d+$/)) {
        return Math.min(Math.max(num / 255, 0), 255);
      }
    },
    
    /**
     * RGBで近いものを返す
     *
     * @param {string[]} rgb [R, G, B]
     * @return {string} 該当した色情報
     */
    searchByRGB: function (rgb) {
      // TODO colorsから一番近い色を返す
    },
    
    /**
     * HEXで近いものを返す
     *
     * @param {string} hex hexカラー。先頭に#がある場合もある \#?[0-9a-fA-F]{3,6}
     * @return {string} 該当した色情報
     */
    searchByHex: function (hex) {
      const hasPrefix = /^\#/.test(hex);  // 先頭に#がついているか
      let hexStr = hex.replace(/^\#/, '');  // 先頭の#なしにしておく
      let matched = []; // 条件に一致した色 { label: string, hex: string, rgb: number[] }
      
      // まずは文字列が一致する色を探す
      if (hexStr.length === 6) {
        // 完全一致で検索する
        // 大文字小文字を判別しない
        matched = colors.filter( color => {
          const regexp = new RegExp(hexStr, 'i');
          return regexp.test(color.hex);
        });
      }
      else if (hexStr.length === 3) {
        // 3文字の場合
        // 部分一致なのかショート記法なのか判断が難しい
        // マッチしたほうを採用する
        
        const hexLong = `${_.pad(hexStr.charAt(0), 2, hexStr.charAt(0))}${_.pad(hexStr.charAt(1), 2, hexStr.charAt(1))}${_.pad(hexStr.charAt(2), 2, hexStr.charAt(2))}`;  // #RGB → #RRGGBB にしてみる
        
        // ショート記法だと判断して探す
        matched = colors.filter( color => color.hex === hexLong);
        
        if (matched.length === 0) {
          // ショート記法で見つからなかった場合、文字列一致で探す
          if (hasPrefix === true) {
            // 前方一致
            colors.filter( color => color.hex.startsWith(hexStr));
          }
          else {
            // 部分一致
            colors.filter( color => color.hex.indexOf(hexStr) >= 0);
          }
        }
      }
      else {
        // 4文字〜5文字
        // 中途半端なので部分一致で探す
        
      }
      
      // // hexが6桁未満なら文字を埋める
      // if (hex.length === 3) {
      //   // 全部同じ文字なら同じ文字で埋める
      //   // ショート記法を展開する
      //   // fea → ffeeaa
      //   hexStr = `${_.pad(hex.charAt(0), 2, hex.charAt(0))}${_.pad(hex.charAt(1), 2, hex.charAt(1))}${_.pad(hex.charAt(2), 2, hex.charAt(2))}`;
      // }
      // else if (hex.length < 6) {
      //   // 足りない文字を'f'で埋める
      //   hexStr = _.pad(hex, 6, 'f');
      // }
      
      // 曖昧検索
      // 文字列が一致しなかった場合、近い色を検索する
      if (matched.length === 0) {
        
        // TODO 3文字の場合、#RGBなのか部分検索なのか分からない
        
        hexStr = hex.length === 3 ? `${_.pad(hex.charAt(0), 2, hex.charAt(0))}${_.pad(hex.charAt(1), 2, hex.charAt(1))}${_.pad(hex.charAt(2), 2, hex.charAt(2))}` : _.pad(hex, 6, 'f');
        
        // RGBごとに数字の差を計算
        // 複数候補が合った場合は、同じ値が多い方にする
        const rgb = hexToRgb(hexStr);
        
        console.log('rgb', rgb);
      }
      
      return matched[0];
    }
  },
  
  computed: {
    /**
     * 色を選択しているか
     */
    isSelect: function () {
      return this.hex !== null;
    },
    
    /**
     * hexからrgbに変換する
     *
     * @return {number[]|null} RGBの配列
     */
    rgb: function () {
      return this.hex !== null ? hexToRgb(this.hex) : null;
    },
    
    /**
     * 明るい色？
     *
     * @return {boolean}
     */
    isBright: function () {
      return this.isSelect === true ? this.brightness(this.rgb) >= settings.bright : false;
    },
    
    /**
     * HEXからRGB（%基準）を計算する
     *
     * @return {number[]} RGBの配列
     */
    rgbPer: function () {
      return this.isSelect === true ? this.rgb.map((value) => (value / 255)) : null;
    },
    
    /**
     * RGBからCMYKを計算する
     *
     * @param {number[]} [C, M, Y, K]
     */
    cmyk: function () {
      let result = null;  // c, m, y, k
      
      if (this.isSelect === true) {
          
        let r = this.rgb[0];
        let g = this.rgb[1];
        let b = this.rgb[2];
      
        let computed = {
          c: 0,
          m: 0,
          y: 0,
          k: 0
        }

        // BLACK
        if (r === 0 && g === 0 && b === 0) {
          computed.k = 1;
          result = [0, 0, 0, 1]
        }
        else {
          computed.c = 1 - (r / 255);
          computed.m = 1 - (g / 255);
          computed.y = 1 - (b / 255);

          const minCMY = Math.min(computed.c, Math.min(computed.m, computed.y));
          computed.c = (computed.c - minCMY) / (1 - minCMY);
          computed.m = (computed.m - minCMY) / (1 - minCMY);
          computed.y = (computed.y - minCMY) / (1 - minCMY);
          computed.k = minCMY;

          result = [
            computed.c,
            computed.m,
            computed.y,
            computed.k
          ];
        }
      }
      
      return result;
    }
  },
  
  watch: {
    /**
     * 検索された
     *
     * @param {string} 検索キーワード
     */
    keywords: function (keywords) {
      // とりあえず英数字の塊を見つける
      const keyword = keywords.match(/^(\d?\.\d{1,3}|\d\.?\d{0,3}|\#?[0-9a-fA-F]{3,6})$/g);
      
      console.log('search', keywords, keyword);
      
      // マッチした数でフォーマットを決める
      // 3つ以上: RGB、2つ以下: HEX
      if (Array.isArray(keyword)) {
        if (keyword.length >= 3) {
          // RGBで検索する
          // 先頭3件にする
          let rgb = keyword.slice(0, 2);
          
          // パーセントベースを0 - 255に統一しておく
          color.map( value => this.decimalToHex(value) );
          
          // RGBで探す
          this.searchByRGB(rgb);
        }
        else {
          // HEXで探す
          const found = this.searchByHex(keyword[0]);
          
          if (found) {
            // 見つかった
            this.selectColor(found.hex, found.label);
          }
          else {
            // 見つからなかった
            this.isNotFound = true;
          }
        }
      }
      else {
        // 条件にマッチしない
        this.isNotFound = true;
      }
    },
    
    /**
     * 色が選択された
     *
     * @param {boolean} val
     */
    isSelect: function (val) {
      if (val === true) {
        // 検索の見つからないのをクリアする
        this.isNotFound = false;
      }
    }
  },
  
  filters: {
    
    /**
     * HEXのプリフィックスをつける
     *
     * @param {string} hex
     */
    hexPrefix: function (hex) {
      return `#${hex}`;
    },
    
    /**
     * RGBをカンマ区切りで表示
     *
     * @param {number[]} rgb [R, G, B]
     */
    commaSeparated: function (rgb) {
      return Array.isArray(rgb) ? rgb.map((value) => Math.round(value * 1000) / 1000).join(', ') : rgb;
    },
    
    /**
     * CMYKをカンマ区切りで表示
     *
     * @param {number[]} cmyk [C, M, Y, K]
     */
    cmyk: function (cmyk)  {
      return Array.isArray(cmyk) ? cmyk.map((value, index) => Math.round(value * 100)).join(', ') : cmyk;
	},
	
	/**
	 * RGBのパーセントをSwift UIColorのフォーマットにする
	 * 
	 * @param {number[]} rgbPer [R, G, B]
	 */
	swiftUIColor: function (rgbPer) {
		if (Array.isArray(rgbPer)) {
			rgbPer = rgbPer.map((value, index) => Math.round(value * 1000) / 1000);	// 小数点3位までにする
			return `red: ${rgbPer[0]}, green: ${rgbPer[1]}, blue: ${rgbPer[2]}, alpha: 1.0`;
		}
		else {
			return rgbPer;
		}
	}
  }
});


// 検索
const search = document.querySelector('#search');
search.addEventListener('submit', function (e) {
  app.search(document.querySelector('#search-keyword').value.trim());
  
  // initialState.search = e.
  e.preventDefault();
});


// 色をコピー
new ClipboardJS('.color-code');

// コピーしたときのツールチップ
tippy('.color-code', {
  content: 'copied!',
  trigger: 'click',
  placement: 'bottom'
});


// TODO カラーコードはドラッグでスクロールさせたい