import {Component, inject, OnDestroy, OnInit} from '@angular/core';
import {Subscription} from 'rxjs';
import {ChatService} from '@pages/altitude/chat/service/chat.service';
import {HeaderComponent} from '@header/header.component';
import {MiniMessageComponent} from '@pages/altitude/chat/mini-message/mini-message.component';
import {MiniMessageInteractionService} from '@pages/altitude/chat/mini-message/mini-message-interaction.service';
import {DatePipe} from '@angular/common';

@Component({
  selector: 'app-chat',
  imports: [
    HeaderComponent,
    MiniMessageComponent,
    DatePipe
  ],
  templateUrl: './chat.component.html',
  styleUrl: './chat.component.scss',
  providers: [MiniMessageInteractionService]
})
export class ChatComponent implements OnInit, OnDestroy {
  private sub?: Subscription;
  private readonly chatService: ChatService = inject(ChatService)
  protected readonly messages = this.chatService.messages;

  constructor(private interaction: MiniMessageInteractionService) {
    interaction.clicks$.subscribe(({action, value}) => {
      if (action === 'run_command') {
        alert(value);
      }
    });
  }

  ngOnInit(): void {
    this.chatService.connect();

  }

  ngOnDestroy(): void {
    this.sub?.unsubscribe();
    this.chatService.disconnect(); // triggers onCompletion server-side, cleans up the emitter
  }

  protected getServerColor(server: string) {
    if (server === 'bayou') {
      return "#007FFF";
    } else if (server === 'lobby') {
      return "white";
    } else if (server === 'creative') {
      return "#FFA500";
    }
    return "white";
  }
}