import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TocService } from '../../services/toc.service';
import { Input } from '@angular/core';

@Component({
  selector: 'app-toc-button',
  standalone: true,
  imports: [CommonModule],
  template: `
    @if (tocService.hasHeadings()) {
      <button
        type="button"
        [class]="buttonClass"
        [class.active]="tocService.isOpen()"
        (click)="tocService.toggle()"
        title="Toggle Table of Contents (Ctrl+\\)"
        [style.top.px]="mode === 'fixed' ? tocService.headerOffset() : null"
      >
        <svg class="w-5 h-5 text-text dark:text-neutral-100" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
          <line x1="3" y1="6" x2="21" y2="6"/>
          <line x1="3" y1="12" x2="21" y2="12"/>
          <line x1="3" y1="18" x2="21" y2="18"/>
        </svg>
      </button>
    }
  `,
  styles: [`
    .toc-toggle-button {
      backdrop-filter: blur(8px);
    }

    .toc-toggle-button.active {
      background-color: rgba(59, 130, 246, 0.1);
      border-color: rgb(59, 130, 246);
    }

    .toc-toggle-button:hover {
      transform: scale(1.05);
    }

    .toc-toggle-button:active {
      transform: scale(0.95);
    }
  `]
})
export class TocButtonComponent {
  readonly tocService = inject(TocService);
  @Input() mode: 'fixed' | 'header' = 'fixed';

  get buttonClass(): string {
    const base = 'toc-toggle-button p-2.5 rounded-lg bg-surface1 dark:bg-gray-800 border border-border dark:border-gray-700 shadow-lg hover:bg-surface2 dark:hover:bg-gray-700 transition z-30';
    if (this.mode === 'header') return `${base} absolute right-0 top-1`;
    return `${base} fixed right-4`;
  }
}