import LocationHandler from "@supersoniks/concorde/core/utils/LocationHandler";
import {html, LitElement, css, PropertyValues, nothing} from "lit";
import {customElement, property} from "lit/decorators.js";
import {ifDefined} from "lit/directives/if-defined.js";
import Electron from "@supersoniks/concorde/core/utils/Electron";
const tagName = "sonic-link";

@customElement(tagName)
export class Link extends LitElement {
  static styles = [
    css`
      a {
        color: inherit;
        text-decoration: none;
        display: contents;
      }
    `,
  ];

  @property({type: String}) href = "";
  private _location = "";
  get location(): string {
    return this._location;
  }
  set location(value: string) {
    this._location = value;
    LocationHandler.updateComponentActiveState(this);
  }

  @property({type: String, attribute: "data-aria-label"}) ariaLabel = null;

  /**
   * mode d'activation du bouton :
   * - strict : l'url courante match exactement avec le href du bouton
   * - partial : l'url courante match à gauche avec le href du bouton
   * - disabled : aucune activation / désactivation
   */
  @property({type: String}) autoActive: "strict" | "partial" | "disabled" = "partial";
  connectedCallback() {
    if (this.href && this.href.indexOf("http") != 0) {
      LocationHandler.onChange(this);
      this.location = document.location.href.replace(document.location.origin, "");
    }

    // on Enter keypress we trigger a click on the link tag
    this.addEventListener("keypress", (e: KeyboardEvent) => {
      if (e.key === "Enter") {
        this.shadowRoot?.querySelector("a")?.click();
      }
    });

    this.setFocusable();

    super.connectedCallback();
  }

  setFocusable() {
    if (this.href) {
      this.setAttribute("tabIndex", "0");
    } else {
      this.removeAttribute("tabIndex");
    }
  }

  disconnectedCallback(): void {
    LocationHandler.offChange(this);
    super.disconnectedCallback();
  }
  private _target: string | null = null;
  @property({type: String}) set target(newTarget) {
    this._target = newTarget;
    Electron.fixBlankLink(this);
    this.requestUpdate();
  }
  get target() {
    return this._target;
  }

  /**
   * Si présent on passe en mode pushstate
   */
  @property({type: Boolean}) pushState: boolean | null = null;

  handlePushState(e: Event) {
    e.preventDefault();
    LocationHandler.changeFromComponent(this);
  }

  updated(changedProperties: PropertyValues) {
    if (changedProperties.has("href")) {
      this.setFocusable();
    }
  }

  render() {
    if (!this.href) return html`<slot></slot>`;
    return html`
      <a
        href="${this.href}"
        aria-label=${this.ariaLabel || nothing}
        target=${ifDefined(this.target)}
        @click=${this.pushState ? this.handlePushState : null}
      >
        <slot></slot>
      </a>
    `;
  }
}