import {Component, HostListener, Input} from '@angular/core';
import {CommonModule, NgOptimizedImage} from '@angular/common';
import {ThemeComponent} from '../theme/theme.component';
import {RouterLink} from '@angular/router';

@Component({
  standalone: true,
  imports: [
    CommonModule,
    ThemeComponent,
    RouterLink,
    NgOptimizedImage
  ],
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
  @Input() current_page: string = '';
  @Input() background_image: string = '';
  @Input() height: string = '';
  @Input() overlay_gradient: number = 0;

  public active: string = '';
  public inverseYPos: number = 0;

  @HostListener('window:scroll', [])
  onWindowScroll(): void {
    const scrollPosition = window.scrollY;
    if (scrollPosition > 0) {
      this.active = 'active';
      this.inverseYPos = (scrollPosition / 4) * -1;
    } else {
      this.active = '';
    }
  }

  public getBackgroundImage() {
    if (this.overlay_gradient) {
      return `linear-gradient(rgba(0, 0, 0, ${this.overlay_gradient}), rgba(0, 0, 0, ${this.overlay_gradient})), url(${this.background_image})`;
    } else {
      return `url(${this.background_image})`;
    }
  }


  public getCurrentPageId(options: string[]) {
    if (options.includes(this.current_page)) {
      return 'current_page'
    }
    return null;
  }

  public getBackgroundPosition() {
    if (this.current_page === 'home') {
      return 'center ' + this.inverseYPos + 'px'
    } else {
      return '';
    }
  }
}