import { html, LitElement, css } from "lit";
import { customElement, property } from "lit/decorators.js";

import { inline } from "@supersoniks/concorde/core/components/ui/loader/styles/inline";
import { fixed } from "@supersoniks/concorde/core/components/ui/loader/styles/fixed";
import { Theme } from "@supersoniks/concorde/core/components/ui/theme/theme";
export type LoaderMode = "inline" | "fixed" | "noDelay";
type LoaderConf = { mode?: string; container?: HTMLElement; noDelay?: boolean };
const tagName = "sonic-loader";
@customElement(tagName)
export class Loader extends LitElement {
  static styles = [
    inline,
    fixed,
    css`
      :host {
        --sc-_loader-bg: var(--sc-primary, currentColor);
        pointer-events: none;
      }

      :host([currentColor]) {
        --sc-_loader-bg: currentColor;
      }

      .sonic-loader {
        opacity: 0;
        animation: showLoader 0.5s 0.5s forwards;
      }
      .sonic-loader--inline,
      .sonic-loader--nodelay {
        animation-delay: 0s;
      }

      @keyframes showLoader {
        0% {
          opacity: 0;
        }

        100% {
          opacity: 1;
        }
      }
    `,
  ];
  static loader: Loader;
  static callCounter = 0;
  static show(conf?: LoaderConf) {
    if (!Loader.loader)
      Loader.loader = document.createElement("sonic-loader") as Loader;
    const loader: Loader = Loader.loader;
    if (!conf) conf = {};
    if (conf.mode) loader.setAttribute("mode", conf.mode);
    if (conf.noDelay) loader.setAttribute("noDelay", "");

    if (!conf.container) {
      conf.container = Theme.getPopContainer();
      conf.mode = "fixed";
    }

    conf.container.appendChild(loader);
    Loader.callCounter++;
  }

  static hide() {
    Loader.callCounter--;
    if (Loader.callCounter > 0) return;
    if (Loader.loader) Loader.loader.remove();
  }

  /**
   * Mode d'affichage du loader
   * * inline : Loader dans le contenu
   * * fixed : Loader global par dessus la page
   */
  @property({ type: String }) mode: LoaderMode = "fixed";
  @property({ type: Boolean }) noDelay: boolean = false;

  render() {
    return html`<div
      class="sonic-loader sonic-loader--${this.mode} ${this.noDelay
        ? "sonic-loader--nodelay"
        : ""} "
    >
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>`;
  }
}