import { Component, Input } from "@angular/core";
import { CommonModule } from "@angular/common";
import { MatTooltipModule } from "@angular/material/tooltip";
import { MatButtonModule } from "@angular/material/button";
import { MatIconModule } from "@angular/material/icon";

import { TabSystemComponent } from "../tab-system/tab-system.component";

/**
 * 🎯 BaseDomainTemplateComponent - Template Visual para Domínios
 * 
 * Este componente fornece a estrutura visual padrão que será reutilizada
 * por todos os domínios que herdam de BaseDomainComponent.
 * 
 * ## 🚀 Como usar:
 * 
 * ```html
 * <app-base-domain-template 
 *   [tabConfig]="tabConfig"
 *   [tabEvents]="tabEvents"
 *   (tabSelected)="onTabSelected($event)"
 *   (tabClosed)="onTabClosed($event)"
 *   (tabAdded)="onTabAdded($event)"
 *   (tableEvent)="onTableEvent($event)">
 * </app-base-domain-template>
 * ```
 */
@Component({
  selector: 'app-base-domain-template',
  standalone: true,
  imports: [
    CommonModule,
    MatTooltipModule,
    MatButtonModule,
    MatIconModule,
    TabSystemComponent
  ],
  template: `
    <div class="domain-container">
      <div class="main-content">
        <app-tab-system
          #tabSystem
          [config]="tabConfig"
          [events]="tabEvents"
          [showDebugInfo]="false"
          (tabSelected)="tabSelected.emit($event)"
          (tabClosed)="tabClosed.emit($event)"
          (tabAdded)="tabAdded.emit($event)"
          (tableEvent)="tableEvent.emit($event)">
        </app-tab-system>
      </div>
    </div>
  `,
  styles: [`
    .domain-container {
      height: 100%;
      max-height: 100%;
      overflow: hidden;
      box-sizing: border-box;
    }

    .main-content {
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    app-tab-system {
      flex: 1;
      min-height: 0;
    }

    @media (max-width: 768px) {
      .domain-container {
        padding: 0.25rem;
      }
    }
  `]
})
export class BaseDomainTemplateComponent {
  @Input() tabConfig: any;
  @Input() tabEvents: any;
  
  // Event emitters para comunicação com o componente pai
  @Input() tabSelected: any;
  @Input() tabClosed: any;
  @Input() tabAdded: any;
  @Input() tableEvent: any;
} 