import {
  Component,
  input,
  output,
  inject,
  signal,
  OnInit
} from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideVolume2, lucideVolumeX } from '@ng-icons/lucide';
import { VoicePlaybackService } from '../../../domains/voice-connection';
import { ContextMenuComponent } from '../context-menu/context-menu.component';

@Component({
  selector: 'app-user-volume-menu',
  standalone: true,
  imports: [NgIcon, ContextMenuComponent],
  viewProviders: [provideIcons({ lucideVolume2, lucideVolumeX })],
  templateUrl: './user-volume-menu.component.html',
  styleUrl: './user-volume-menu.component.scss'
})
/* eslint-disable @typescript-eslint/member-ordering */
export class UserVolumeMenuComponent implements OnInit {
  x = input.required<number>();
  y = input.required<number>();
  peerId = input.required<string>();
  displayName = input.required<string>();
  closed = output<undefined>();

  private playback = inject(VoicePlaybackService);

  volume = signal(100);
  isMuted = signal(false);

  ngOnInit(): void {
    const id = this.peerId();

    this.volume.set(this.playback.getUserVolume(id));
    this.isMuted.set(this.playback.isUserMuted(id));
  }

  onSliderInput(event: Event): void {
    const val = parseInt((event.target as HTMLInputElement).value, 10);

    this.volume.set(val);
    this.playback.setUserVolume(this.peerId(), val);
  }

  toggleMute(): void {
    const next = !this.isMuted();

    this.isMuted.set(next);
    this.playback.setUserMuted(this.peerId(), next);
  }

  muteButtonClass(): string {
    return this.isMuted()
      ? 'bg-destructive/15 text-destructive hover:bg-destructive/25'
      : 'text-muted-foreground hover:bg-secondary hover:text-foreground';
  }
}