*/

const appendRefer = ( urlFile ) => {
    const fileExtension = urlFile.match(/\.[^/.]+$/);
    const referElem = createByExtens(urlFile, fileExtension[0]);
    const fileName = urlFile.match(/[^\/=\b]+(?=\.[^\/.]*$)/)[0];
    referElem.id = fileName.replace(/\./g,'_')
    + fileExtension[0].replace(/\./g,'_');
    return referElem;
}

const createByExtens = ( urlFile, fileExtens ) => {
    switch (fileExtens) {
        case '.css':
            const linkRefer = document.createElement('link');
            linkRefer.href = urlFile;
            linkRefer.setAttribute('rel', 'stylesheet');
            return linkRefer;
        case '.js':
        case '.md':
            const scriptRefer = document.createElement('script');
            scriptRefer.src = urlFile;
            return scriptRefer;
        default:
            console.log(fileExtens);
            break;
    }
}

const rEFerfUse = (elemIn) => {
    if (typeof SlideMenu === "function") {
        initMenu ( elemIn );
    } else {
        const referS = [
            "https://grubersjoe.github.io/slide-menu/slide-menu.js",
            "https://grubersjoe.github.io/slide-menu/slide-menu.css",
            "https://grubersjoe.github.io/slide-menu/demo.css",
        ];
        referS.forEach((refer) => {
            const tag = appendRefer(refer);
            document.documentElement.appendChild(tag);
            switch ( tag.id ) {
                case "slide-menu_js":
                    tag.addEventListener("load", () => {
                        initMenu ( elemIn );
                    });
                break;
            }
        });
    }
}

const arrSpliter = (txtInpt, chrSplt) => {
    const arrOutput = txtInpt.trim().split(chrSplt);
    return arrOutput;
}

const sixLineMethod = [
    {id: '0', text: '初'},
    {id: '1', text: '二'},
    {id: '2', text: '三'},
    {id: '3', text: '四'},
    {id: '4', text: '五'},
    {id: '5', text: '上'},
];

const resolveTxt = (txtIn) => {
    const paraS_a = arrSpliter(txtIn, ">　　　　　　　　");
    const nArrParaS = new Array();
    paraS_a.forEach((para) => {
        const arrLines = arrSpliter(para, "\n");
        const nArrStrS = new Array();
        arrLines.forEach((line) => {
            const aStrS = arrSpliter(line, "|");
            const nObjStrS = new Object();
            nObjStrS.id = aStrS[0];
            nObjStrS.text = aStrS[3];
            nObjStrS.children = sixLineMethod;
            nArrStrS.push(nObjStrS);
        });
        const nObjParaS = new Object();
        nObjParaS.id = nArrStrS[8].id;
        nObjParaS.text = nArrStrS[8].text;
        nArrStrS.pop();
        nObjParaS.children = nArrStrS;
        nArrParaS.push(nObjParaS);
    });
    console.log(nArrParaS);
    return nArrParaS;
}

const visualizMenu = (obj) => {
    const menuElement = document.createElement("nav");
    menuElement.className = "slide-menu";
    const treeUnit = buildTree(obj, 0);
    menuElement.appendChild(treeUnit);
    rEFerfUse ( menuElement );
    menuElement.style.bottom = "24px";
    menuElement.style.height = "95%";
    document.body.appendChild(menuElement);
}

const fetchCors = async ( url ) => {
    const respons = await fetch(url);
    const docData = await respons.text();
    const parsedArr = resolveTxt(docData);
    visualizMenu ( parsedArr );
}

const initMenu = (targetElem) => {
    const menu = new SlideMenu(targetElem, {
        keyClose: 'Escape',
        submenuLinkAfter: '<span style="margin-left: 1em; font-size: 85%;">⮞</span>',
        backLinkBefore: '<span style="margin-right: 1em; font-size: 85%;">⮜</span>',
    });
    targetElem.style.right = '24px';
    menu.open();
}

function buildTree(nodes, depth) {
  const _this2 = this;

  const rootUlEle = createUlEle();

  if (nodes && nodes.length) {
    nodes.forEach(function (node) {
      const liEle = createLiEle(node, depth === null - 1);
      let ulEle = null;

      if (node.children && node.children.length) {
        ulEle = _this2.buildTree(node.children, depth + 1);
      }

      ulEle && liEle.appendChild(ulEle);
      rootUlEle.appendChild(liEle);
    });
  }
  return rootUlEle;
}

function createUlEle() {
  const ul = document.createElement('ul');
  ul.classList.add('treejs-nodes');
  return ul;
}

function createLiEle(node, closed) {
  const li = document.createElement('li');
  li.classList.add('treejs-node');
  if (closed) li.classList.add('treejs-node__close');

  if (node.children && node.children.length) {
    const switcher = document.createElement('span');
    switcher.classList.add('treejs-switcher');
    li.appendChild(switcher);
  } else {
    li.classList.add('treejs-placeholder');
  }

  const checkbox = document.createElement('span');
  checkbox.classList.add('treejs-checkbox');
  li.appendChild(checkbox);
  const aTag = document.createElement('a');
  aTag.classList.add('treejs-label');
  const text = document.createTextNode(node.text);
  aTag.appendChild(text);
  li.appendChild(aTag);
  li.nodeId = node.id;
  return li;
}

const createTrigger = () => {
    const div = document.createElement("div");
    div.id = "triggerField";
    div.addEventListener("click", () => {
        const trgrEntity = document.querySelector("nav.slide-menu");
        trgrEntity._slideMenu.toggle();
    });
    div.style = "border: 1px dashed rgb(255, 0, 255); bottom: 0px; height: 24px; position: fixed; right: 0px; width: 24px;";
    document.body.appendChild(div);
}

const preprocessPrecast = () => {
    const url = "https://66e.github.io/9/hexagram.md";
    fetchCors(url);
    createTrigger ();
}

const adaptSituatS = (container) => {
    const uniqueLauncher = () => {
        const trgrEntity = document.querySelector("div#triggerField");
        if ( !trgrEntity ) {
            preprocessPrecast();
        } else {
            console.log("already entity");
        }
    }

    if ( container ) {
        uniqueLauncher();
    } else {
        document.addEventListener("DOMContentLoaded", () => {
            uniqueLauncher();
        });
    }
}

adaptSituatS(document.body);

/*