import { Component, inject } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';
import { LayoutId, LayoutService } from '../../core/services/layout.service';

@Component({
  selector: 'app-layout-switcher',
  standalone: true,
  imports: [TranslatePipe],
  template: `
    <label class="sr-only" for="layout-select">{{ 'layout.label' | translate }}</label>
    <select
      id="layout-select"
      class="select !w-auto !py-2 !pr-9 !text-sm"
      [value]="layout.layout()"
      (change)="onChange($event)"
      [attr.aria-label]="'layout.label' | translate"
    >
      @for (option of options; track option.id) {
        <option [value]="option.id">{{ option.labelKey | translate }}</option>
      }
    </select>
  `,
})
export class LayoutSwitcherComponent {
  readonly layout = inject(LayoutService);

  readonly options: Array<{ id: LayoutId; labelKey: string }> = [
    { id: 'sidebar', labelKey: 'layout.sidebar' },
    { id: 'topnav', labelKey: 'layout.topnav' },
    { id: 'compact', labelKey: 'layout.compact' },
    { id: 'wide', labelKey: 'layout.wide' },
  ];

  onChange(event: Event): void {
    const value = (event.target as HTMLSelectElement).value as LayoutId;
    this.layout.setLayout(value);
  }
}
