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;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

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

    .tabs .tab {
      text-align: center;
      line-height: 3em;
      cursor: pointer;
    }

    .selector {
      position: absolute;
      width: calc(100% / 3);
      height: 1px;
      left: 0;
      bottom: 0px;
      background: orange;
      transition: all 0.2s;
    }
  `;

  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 + Legal Info</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`;
      }
    }
  }
}