import { Component, computed, inject, input, signal } from '@angular/core';
import { RouterLink } from '@angular/router';
import { HelpAccessService } from '../../core/help/help-access';
import { GuideSectionId } from '../../core/help/guide-content';
import { TeamStore } from '../../core/team/team-store';

@Component({
  selector: 'app-context-help',
  imports: [RouterLink],
  templateUrl: './context-help.html',
  styleUrl: './context-help.scss',
})
export class ContextHelp {
  private readonly helpAccess = inject(HelpAccessService);
  private readonly teamStore = inject(TeamStore);

  readonly title = input.required<string>();
  readonly hints = input.required<readonly string[]>();
  readonly sectionId = input.required<GuideSectionId>();

  protected readonly visible = this.helpAccess.showContextHelp;
  protected readonly expanded = signal(false);
  protected readonly guideCommands = computed(() => [
    '/team',
    this.teamStore.team()?.id,
    'more',
    'guide',
  ]);

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