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

interface Tracker {
  id: string;
  name: string;
  type: string;
}

@customElement('tracker-pill')
export class TrackerPill extends LitElement {
  @property({ type: Object })
  tracker!: Tracker;

  static styles = css`
    sl-tag {
      display: inline-flex;
      align-items: center;
    }

    sl-icon {
      font-size: var(--sl-font-size-medium);
      margin-right: var(--sl-spacing-x-small);
    }
  `;

  private getTrackerIcon(tracker: Tracker): string {
    const type = tracker.type?.toLowerCase() || '';
    const name = tracker.name?.toLowerCase() || '';

    if (type.includes('jira') || name.includes('jira')) {
      return 'jira';
    }
    if (type.includes('github') || name.includes('github')) {
      return 'github';
    }
    if (type.includes('gitlab') || name.includes('gitlab')) {
      return 'gitlab';
    }
    return 'box-seam';
  }

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

    const iconName = this.getTrackerIcon(this.tracker);

    return html`
      <sl-tag size="medium" pill>
        <sl-icon name="${iconName}"></sl-icon>
        ${this.tracker.name}
      </sl-tag>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'tracker-pill': TrackerPill;
  }
}
