import { Component, Input, inject } from '@angular/core';
import type { NavIcon } from './nav-items';
import { NAV_ICON_EMOJI } from '../core/theme/appearance.config';
import { AppearanceService } from '../core/services/appearance.service';

@Component({
  selector: 'app-nav-icon',
  standalone: true,
  template: `
    @if (appearance.useEmojiIcons()) {
      <span class="text-lg leading-none" aria-hidden="true">{{ emoji() }}</span>
    } @else {
      @switch (icon) {
        @case ('dashboard') {
          <svg [attr.stroke-width]="appearance.strokeWidth()" class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
            <rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" />
            <rect x="14" y="14" width="7" height="7" /><rect x="3" y="14" width="7" height="7" />
          </svg>
        }
        @case ('coffee') {
          <svg [attr.stroke-width]="appearance.strokeWidth()" class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
            <path d="M18 8h1a4 4 0 0 1 0 8h-1" /><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z" />
            <line x1="6" y1="1" x2="6" y2="4" /><line x1="10" y1="1" x2="10" y2="4" /><line x1="14" y1="1" x2="14" y2="4" />
          </svg>
        }
        @case ('croissant') {
          <svg [attr.stroke-width]="appearance.strokeWidth()" class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
            <path d="M4 14c0-3 2-6 8-6s8 3 8 6-2 4-8 4-8-1-8-4Z" />
          </svg>
        }
        @case ('soup') {
          <svg [attr.stroke-width]="appearance.strokeWidth()" class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
            <path d="M4 11h16v2a6 6 0 0 1-12 0v-2Z" /><path d="M6 11V8a6 6 0 0 1 12 0v3" />
          </svg>
        }
        @case ('moon') {
          <svg [attr.stroke-width]="appearance.strokeWidth()" class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
          </svg>
        }
        @case ('list') {
          <svg [attr.stroke-width]="appearance.strokeWidth()" class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
            <path d="M11 18H3" /><path d="M11 6H3" /><path d="M16 6h5" /><path d="M16 12h5" /><path d="M16 18h5" />
            <path d="M7 6v.01" /><path d="M7 12v.01" /><path d="M7 18v.01" />
          </svg>
        }
        @case ('book') {
          <svg [attr.stroke-width]="appearance.strokeWidth()" class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
            <path d="M12 20h9" /><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
          </svg>
        }
        @case ('leaf') {
          <svg [attr.stroke-width]="appearance.strokeWidth()" class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
            <path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.5 18 2c1 2 2 4.5 2 8 0 5.5-4.5 10-9 10Z" />
            <path d="M2 21c0-3 2-6 6-8" />
          </svg>
        }
        @case ('diet') {
          <svg [attr.stroke-width]="appearance.strokeWidth()" class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
            <path d="M7 21h10" /><path d="M12 3a5 5 0 0 0-5 5v2h10V8a5 5 0 0 0-5-5Z" />
            <path d="M7 10v11" /><path d="M17 10v11" />
          </svg>
        }
        @case ('calendar') {
          <svg [attr.stroke-width]="appearance.strokeWidth()" class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
            <rect x="3" y="4" width="18" height="18" rx="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" />
          </svg>
        }
        @case ('cart') {
          <svg [attr.stroke-width]="appearance.strokeWidth()" class="h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
            <circle cx="9" cy="21" r="1" /><circle cx="20" cy="21" r="1" />
            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
          </svg>
        }
      }
    }
  `,
})
export class NavIconComponent {
  readonly appearance = inject(AppearanceService);
  @Input({ required: true }) icon!: NavIcon;

  emoji(): string {
    return NAV_ICON_EMOJI[this.icon] ?? '•';
  }
}
