import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { router } from '../router';
import '@shoelace-style/shoelace/dist/components/alert/alert.js';
import '@shoelace-style/shoelace/dist/components/icon/icon.js';

@customElement('global-notice')
export class GlobalNotice extends LitElement {
  @state() private _message = '';

  connectedCallback() {
    super.connectedCallback();
    this._checkUrlForMessage();
  }

  private _checkUrlForMessage() {
    const urlParams = new URLSearchParams(window.location.search);
    const message = urlParams.get('message');
    if (message) {
      this._message = message.replace(/_/g, ' '); // Replace underscores with spaces
      // Clean the URL after we have captured the message
      const newUrl = `${window.location.pathname}`;
      window.history.replaceState({}, '', newUrl);
    }
  }

  private _handleClose() {
    this._message = '';
  }

  static styles = css`
    .notice {
      position: fixed;
      top: 1rem;
      right: 1rem;
      z-index: 1000;
    }
  `;

  render() {
    if (!this._message) {
      return html``;
    }

    return html`
      <sl-alert
        class="notice"
        variant="primary"
        closable
        open
        @sl-hide=${this._handleClose}
      >
        <sl-icon slot="icon" name="info-circle"></sl-icon>
        ${this._message}
      </sl-alert>
    `;
  }
}
