import { Component } from '@angular/core';
import { TabModule } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [TabModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-tab id="element">
      <e-tabitems>
        <e-tabitem [header]="headerText[0]" [content]="content0"></e-tabitem>
        <e-tabitem [header]="headerText[1]" [content]="content1"></e-tabitem>
        <e-tabitem [header]="headerText[2]" [content]="content2"></e-tabitem>
      </e-tabitems>
    </ejs-tab>
  `
})
export class AppComponent {
  public headerText: object[] = [
    { text: 'Home' },
    { text: 'Settings' },
    { text: 'Profile' }
  ];

  public content0 = 'Welcome to the home tab with your dashboard content.';
  public content1 = 'Configure application settings and preferences here.';
  public content2 = 'View and edit your user profile information.';
}

// Add new tab at specific index
const newTab = { 
  header: { text: 'New Tab' }, 
  content: 'New content here' 
};
this.tabObj.addTab([newTab], 2);

// Handle tab selection changes
onTabSelected(args: SelectEventArgs) {
  console.log('Selected tab index:', args.selectedIndex);
  // Refresh data for selected tab
  this.loadDataForTab(args.selectedIndex);
}

public headerText: object[] = [
  { text: 'Dashboard', iconCss: 'e-icons e-home' },
  { text: 'Products', iconCss: 'e-icons e-shopping-cart' },
  { text: 'Orders', iconCss: 'e-icons e-receipt' }
];

// Use Dynamic mode for memory optimization
<ejs-tab 
  loadOn="Dynamic"  // Only active content in DOM
  heightAdjustMode="Auto">
</ejs-tab>

// Tab component has built-in keyboard support
// Tab key - focus next header
// Arrow keys - navigate between tabs
// Enter/Space - activate tab
// Users can switch tabs without mouse