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

@customElement('consentsoftware-tabs')
export class ConsentsoftwareTabs extends LitElement {
  public static demo = () => html`<consentsoftware-tabs></consentsoftware-tabs>`;

  public static styles = css`
    :host {
      display: block;
      position: relative;
      background: var(--muted, hsl(0 0% 15%));
    }

    .tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }

    .tabs .tab {
      text-align: center;
      padding: 8px 0;
      font-size: 0.8em;
      font-weight: 500;
      color: var(--muted-foreground, hsl(0 0% 64%));
      cursor: pointer;
      transition: color 0.15s ease;
    }

    .tabs .tab:hover {
      color: var(--foreground, hsl(0 0% 95%));
    }

    @media (max-width: 560px) {
      .tabs .tab {
        font-size: 0.75em;
        padding: 6px 0;
      }
    }

    .selector {
      position: absolute;
      width: calc(100% / 3);
      height: 2px;
      left: 0;
      bottom: 0;
      background: var(--foreground, hsl(0 0% 95%));
      transition: all 0.2s ease-out;
      border-radius: 1px;
    }
  `;

  constructor() {
    super();
  }

  public render(): TemplateResult {
    return html`
      <div class="tabs">
        <div class="tab" @click=${this.handleClick}>Consent</div>
        <div class="tab" @click=${this.handleClick}>Details</div>
        <div class="tab" @click=${this.handleClick}>Cookie Policy</div>
      </div>
      <div class="selector"></div>
    `;
  }

  public async handleClick(mouseEvent) {
    const target = mouseEvent.target as HTMLElement;
    const tab: HTMLDivElement = target.closest('.tab');
    if (tab) {
      const selector: HTMLDivElement = this.shadowRoot?.querySelector('.selector');
      if (selector) {
        selector.style.left = `${tab.offsetLeft}px`;
        selector.style.width = `${tab.offsetWidth}px`;
      }
    }
  }
}