/**
 * Web Animations APIによるfadeIn・fadeOut・fadeToggleアニメーション処理関数
 * @type {Object}
 * @param {HTMLElement} target ターゲット設定（必須）
 * @param {string} animeType アニメーションの種類 'fadeIn' or 'fadeOut' or 'fadeToggle'（任意　デフォルト:'fadeToggle'）
 * @param {number} duration アニメーション時間　ミリ秒（任意　デフォルト:400）
 * @param {string} easing 'Web Animations API'で設定できるイージング（任意　デフォルト:ease）
 * @param {string} displayStyle 'fadeIn'表示後に付与されるcss displayの値（任意　デフォルト:block）
 * @param {function} callBack アニメーション後に呼び出すコールバック関数（任意　デフォルト:null）
 */
const fadeAnime = async setOptions => {
  'use strict';

  const typeFadeToggle = 'fadeToggle';
  const typeFadeIn = 'fadeIn';
  const typeFadeOut = 'fadeOut';

  //デフォルト設定
  const defaultOptions = {
    target: false,
    animeType: typeFadeToggle,
    duration: 400,
    easing: 'ease',
    displayStyle: 'block',
    callBack: null,
  }

  //設定をマージ
  const options = Object.assign({}, defaultOptions, setOptions);

  //要素が存在しない場合は処理を終了
  const target = options.target;
  if(!target) {
    return;
  }

  //fadeToggle分岐
  let animeType = options.animeType;
	const styles = getComputedStyle(target);
	const textNone = 'none';
  const isDisplayNone = styles.display === textNone;
  if (animeType === typeFadeToggle) {
    animeType = isDisplayNone ? typeFadeIn : typeFadeOut;
  }

  const busyClass = 'is-fade-busy';
  const targetClassList = target.classList;

  //既に表示されている or 実行中だった場合は処理しない
  const isFadeIn = animeType === typeFadeIn;
  const isFadeOut = animeType === typeFadeOut;
  const isBusy = targetClassList.contains(busyClass);
  if (
    //fadeIn 既に表示されている or 実行中だった場合は処理しない
    (isFadeIn && (!isDisplayNone || isBusy))
    //fadeOut 既に非表示 or 実行中だった場合は処理しない
    || (isFadeOut && (isDisplayNone || isBusy))
    //有効なキーワードではない場合も処理しない
    || (!isFadeIn && !isFadeOut)
  ) {
    return false;
  }
  //重複処理対策class追加
	targetClassList.add(busyClass);


  //フェードアニメーション
  const targetStyle = target.style;
  const displayStyle = options.displayStyle;

  let opacityAnimeValue;
  if(isFadeOut) {
    //opacity 1 → 0 へアニメーション
    targetStyle.opacity = 1;
    opacityAnimeValue = 0;

  } else {
    //opacity 0 → 1 へアニメーション
    targetStyle.display = displayStyle;
    targetStyle.opacity = 0;
    opacityAnimeValue = 1;
  }
  await target.animate(
    {
      opacity: opacityAnimeValue
    },
    {
      duration: options.duration,
      easing: options.easing
    }
  ).finished;

  //アニメーション終了処理
  //opacity削除
  targetStyle.opacity = '';

  //実行中class削除
	targetClassList.remove(busyClass);

  if(isFadeOut) {
    //要素を非表示
    targetStyle.display = textNone;
  }

  //コールバック関数が設定されていたら呼び出す
  const callBack = options.callBack;
  if(typeof callBack === 'function') {
    callBack();
  }
}



//フェードインテスト
const fadeInElm = document.querySelector('.js-fade-in-elm');
document.getElementById('js-fade-in').addEventListener('click', ()=> {
	//フェードイン呼び出し
	fadeAnime({
		target: fadeInElm,
		animeType: 'fadeIn',
		duration: 400,
		easing: 'ease',
		displayStyle: 'block',
		callBack: () => {
			console.log('fadeIn終了');
		}
	});
});

//フェードアウトテスト
const fadeOutElm = document.querySelector('.js-fade-out-elm');
document.getElementById('js-fade-out').addEventListener('click', ()=> {
	//フェードアウト呼び出し
	fadeAnime({
		target: fadeOutElm,
		animeType: 'fadeOut',
		callBack: () => {
			console.log('fadeOut終了');
		}
	});
});

//フェードイン・アウトテスト
const fadeToggleElm = document.querySelector('.js-fade-toggle-elm');
document.getElementById('js-fade-toggle').addEventListener('click', ()=> {
	//フェードイン・アウト呼び出し
	fadeAnime({
		target: fadeToggleElm,
		animeType: 'fadeToggle'
	});
});