/**
 * https://tobiasahlin.com/spinkit
 * https://connoratherton.com/loaders
 * https://projects.lukehaas.me/css-loaders
 * https://matejkustec.github.io/SpinThatShit
 */
export function useLoading() {
  const className = `loaders-css__square-spin`;
  const styleContent = `
  .app-loading-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #181B23;
    z-index: 10000;
  }
  .${className} {
    width: 100px;
    height: 100px;
    background-image: url("./loading.webp");
    background-size: cover;
  }
      `;
  const loadingStyle = document.createElement('style');
  loadingStyle.id = 'app-loading-style';
  loadingStyle.innerHTML = styleContent;

  const loadingEl = document.createElement('div');
  loadingEl.className = 'app-loading-wrap';
  loadingEl.innerHTML = `<div class="${className}"></div>`;

  //   loadingStyle.innerHTML = `
  //   .${className} > div {
  //   margin: 0 auto;
  //   width: 50px;
  //   height: 50px;
  //   background: #fff;
  // }
  // `
  //   loadingEl.innerHTML = `<div class="${className}"></div>`

  return {
    appendLoading() {
      document.head.appendChild(loadingStyle);
      document.body.appendChild(loadingEl);
    },
    removeLoading() {
      document.head.removeChild(loadingStyle);
      document.body.removeChild(loadingEl);
    },
  };
}