/**
 * EwCommonHeader
 * options = {
 *   lang: "ja" | "en", // 言語。未指定の場合は"ja"
  *  fg: "dark" | "primary" | "light"        // テーマ。未指定の場合は"primary"
  *  bg: "white" | "primary" | "transparent" // トップに戻るボタンを表示するか。初期値は1
 * 
 *   target_id: string, // 展開する要素のID。未指定の場合はスクリプトの場所
 * };
 */

EwCommonHeader = function (options = {}) {
  options = Object.assign({
    lang: "ja",
    fg: "primary",
    bg: "white",
    target_id: undefined
  }, options);

  // var
  var url_wp = "https://exawizards.com";
  // var url_wp = "http://localhost:8888";

  // // elem
  var scriptElem = document.currentScript;
  var parentElem = options.target_id ? document.getElementById(options.target_id) : scriptElem.parentNode;


  // Rest Api
  echWpRestApi(`${url_wp}/wp-json/wp/custom/ew_header`, options, function (results) {
    // console.log(results);

    // js
    parentElem.append(echCreateElement("script", null, {
      type: "text/javascript",
      src: results.js
    }));

    // dom
    var dom = new DOMParser().parseFromString(results.dom, "text/html");

    var ewheader = dom.getElementsByClassName("ew-header")[0];
    ewheader.style.opacity = 0;
    parentElem.append(ewheader);

    // init
    var isInitialized = false;
    function runInit() {
      if (!isInitialized) {
        if (typeof initEwHeader === "function") {
          initEwHeader();
        }
        else {
          setTimeout(runInit, 1000);
        }
      }
    }
    runInit();

    // show
    setTimeout(function () {
      ewheader.style.opacity = 1;
    }, 1000);
  });
}


/**
 * WP REST API
 **/
function echWpRestApi(url, props, callback) {
  // query
  let query = `${url}?`;
  Object.keys(props).forEach((key) => {
    query += `${key}=${props[key]}&`;
  });
  // console.log(query);

  // get
  echGetJSON(query, function (err, data) {
    // $.getJSON(query, function (results) {
    if (err !== null) {
      // console.log("error", err);
    }
    else {
      if (callback) {
        callback(data);
      }
    }
  });
}

/**
 * Get JSON
 **/
function echGetJSON(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'json';
  xhr.onload = function () {
    var status = xhr.status;
    if (status === 200) {
      callback(null, xhr.response);
    } else {
      callback(status, xhr.response);
    }
  };
  xhr.send();
}


/**
 * Create Element
 * name: string, // 要素名
 * classnames: string, // スペースで区切って複数指定
 * attributes: json // 属性・値のjson
 */
function echCreateElement(name, classNames, attributes) {
  var elem = document.createElement(name);

  // className
  if (classNames) {
    classNames
      .split(" ")
      .forEach(function (c) {
        elem.classList.add(c);
      });
  }

  // attributes
  for (var a in attributes) {
    elem[a] = attributes[a];
  }

  return elem;
}