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

@customElement('arx-eve-link')
export class EveLink extends LitElement {
  @property({ type: String }) href = '#';
  @property({ type: String }) target = '';
  @property({ type: String }) rel = '';

  static override styles = css`
    a {
      display: inline-block;
      color: var(--color-primary);
    }
  `;

  get hrefValue() {
    let href = this.href;
    if (href.startsWith('javascript:')) return href;
    if (href.startsWith('eve://')) href = href.replace('eve://', '#');
    if (href.startsWith('/')) href = href.replace('/', '#');
    if (!href.startsWith('#')) href = `#${href}`;
    return href;
  }

  override render() {
    return html`
      <a
        part="link"
        .href=${this.hrefValue}
        .target=${this.target}
        .rel=${this.rel}
      >
        <slot></slot>
      </a>
    `;
  }
}