import { Component, inject } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';
import { AppearanceId } from '../../core/theme/appearance.config';
import { AppearanceService } from '../../core/services/appearance.service';

@Component({
  selector: 'app-appearance-switcher',
  standalone: true,
  imports: [TranslatePipe],
  template: `
    <label class="sr-only" for="appearance-select">{{ 'appearance.label' | translate }}</label>
    <div class="relative flex items-center gap-1.5">
      <span
        class="hidden h-3 w-3 shrink-0 rounded-full sm:inline-block"
        [style.background-color]="appearance.proposal().swatch"
        aria-hidden="true"
      ></span>
      <select
        id="appearance-select"
        class="select !w-auto max-w-[9.5rem] !py-2 !pr-9 !text-sm sm:max-w-none"
        [value]="appearance.proposal().id"
        (change)="onChange($event)"
        [attr.aria-label]="'appearance.label' | translate"
      >
        @for (p of appearance.proposals(); track p.id) {
          <option [value]="p.id">{{ p.labelKey | translate }}</option>
        }
      </select>
    </div>
  `,
})
export class AppearanceSwitcherComponent {
  readonly appearance = inject(AppearanceService);

  onChange(event: Event): void {
    const value = (event.target as HTMLSelectElement).value as AppearanceId;
    this.appearance.setProposal(value);
  }
}
