import { booleanAttribute, computed, Directive, inject, input, model } from '@angular/core';

let nextId = 0;

@Directive({
  selector: '[<%= camelize(name) %>]',
  exportAs: '<%= camelize(name) %>',
  host: {
    '[attr.aria-label]': 'label() || null',
  },
})
export class <%= classify(name) %> {
  private readonly instanceId = `<%= dasherize(name) %>-${nextId++}`;

  readonly label = input('');
  readonly expanded = model(false);
  readonly menuId = computed(() => `${this.instanceId}-menu`);

  toggle(): void {
    this.expanded.update((value) => !value);
  }

  close(): void {
    this.expanded.set(false);
  }
}

@Directive({
  selector: '[<%= camelize(name) %>Item]',
  exportAs: '<%= camelize(name) %>Item',
  host: {
    '[attr.aria-current]': 'current() ? ariaCurrent() : null',
    '[attr.aria-disabled]': 'disabled() ? "true" : null',
    '(click)': 'nav.close()',
  },
})
export class <%= classify(name) %>Item {
  protected readonly nav = inject(<%= classify(name) %>);

  readonly current = input(false, { transform: booleanAttribute });
  readonly disabled = input(false, { transform: booleanAttribute });
  readonly ariaCurrent = input('page');
}

@Directive({
  selector: '[<%= camelize(name) %>Toggle]',
  exportAs: '<%= camelize(name) %>Toggle',
  host: {
    '[attr.aria-expanded]': 'nav.expanded()',
    '[attr.aria-controls]': 'nav.menuId()',
    '(click)': 'nav.toggle()',
  },
})
export class <%= classify(name) %>Toggle {
  protected readonly nav = inject(<%= classify(name) %>);
}

@Directive({
  selector: '[<%= camelize(name) %>Menu]',
  exportAs: '<%= camelize(name) %>Menu',
  host: {
    '[id]': 'nav.menuId()',
    '[hidden]': '!nav.expanded()',
  },
})
export class <%= classify(name) %>Menu {
  protected readonly nav = inject(<%= classify(name) %>);
}