import {
  Component,
  Input,
  ContentChild,
  TemplateRef,
  OnInit,
  HostListener,
} from '@angular/core';
import { FormTabWithContent } from '../generic-form/generic-form.component';
import { FormGroup } from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-custom-tabs',
  templateUrl: './custom-tabs.component.html',
  styleUrls: ['./custom-tabs.component.scss'],
  standalone: true,
  imports: [CommonModule],
})
export class CustomTabsComponent implements OnInit {
  @Input() tabs: FormTabWithContent[] = [];
  @Input() form?: FormGroup;

  @ContentChild('autoContent', { static: false }) autoContent?: TemplateRef<any>;

  selectedTabId: string = '';
  isMobile: boolean = false;

  ngOnInit() {
    if (this.tabs.length > 0) {
      this.selectedTabId = this.tabs[0].id;
    }
    this.checkIfMobile();
  }

  @HostListener('window:resize', ['$event'])
  onResize() {
    this.checkIfMobile();
  }

  private checkIfMobile() {
    this.isMobile = window.innerWidth <= 768;
  }

  selectTab(id: string, event: Event) {
    event.preventDefault();
    this.selectedTabId = id;
  }

  /**
   * Formata o label da tab para mobile
   * Remove o nome do domínio "Motorista:" quando for mobile e nova aba (não edição)
   * Exemplos:
   * - "Motorista: João" -> "João" (mobile + não é "Novo")
   * - "Novo Motorista" -> "Novo Motorista" (inalterado)
   */
  getFormattedTabLabel(tab: FormTabWithContent): string {
    if (!this.isMobile) {
      return tab.label; // ✅ Desktop: sempre mostra label completo
    }

    // ✅ Mobile: verifica se é um título de edição com domínio
    if (tab.label.includes(':') && !tab.label.startsWith('Novo')) {
      const parts = tab.label.split(':');
      if (parts.length >= 2) { 
        // Remove a primeira parte (domínio) e mantém o resto
        return parts.slice(1).join(':').trim();
      }
    }

    return tab.label; // ✅ Fallback: retorna label original
  }
}
