import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';

import {Copy} from 'sae-lib/buttons/copy/copy';
import {FeedbackButton} from '../feedback-button/feedback-button';
import {ChatbotMessage} from '../../services/chatbot.message.type';
import {NgClass} from '@angular/common';
import {Store} from '@ngrx/store';
import {StateInterface} from '../../reducers';


type MessageKind = "user" | "llm";

@Component({
  selector: 'app-message-box',
  imports: [
    Copy,
    FeedbackButton,
    NgClass
  ],
  templateUrl: './message-box.html',
  styleUrl: './message-box.scss'
})
export class MessageBox implements OnChanges {

  @Input() kind: MessageKind = <"user" | "llm">""
  @Input() conf: any = {}
  @Input() content: any = ""
  @Input() message: ChatbotMessage = {} as ChatbotMessage;
  id: string = "00122121221312";
  sanitizedContent: SafeHtml = "";
  expanded: boolean = false;

  constructor(private sanitizer: DomSanitizer, private store: Store<StateInterface>) {
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['content']) {
      this.sanitizeContent();
    }
  }

  sanitizeContent(): void {
    this.sanitizedContent = this.sanitizer.bypassSecurityTrustHtml(this.content);
  }

  bookmark() {
    console.log("TODO bookmark")
  }


  generateResponse() {
    console.log("TODO generateResponse")
  }

  editMessage() {
    console.log("TODO editMessage")
  }

  toggleSources() {
    console.log("TODO toggle sources")
    this.store.dispatch({
      type: 'UPDATE_APP',
      payload: {
        displaySourcesPanelLarge: !this.store.select(state => state.app.displaySourcesPanelLarge)
      }
    })
  }

  toggleFullScreen() {
    console.log("TODO toggle fullscreen")
    this.expanded = !this.expanded;
  }
}