import { Component, OnInit } from '@angular/core';
import { MergeComponent } from '../merge/merge.component';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment.development';
import { CommonModule } from '@angular/common';
import { FetchLogService } from 'src/app/shared/services/fetch-log.service';
import { WebsocketService } from 'src/app/shared/services/websocket.service';

@Component({
  selector: 'app-changelog',
  standalone: true,
  templateUrl: './changelog.component.html',
  styleUrls: ['./changelog.component.css'],
  imports: [CommonModule,MergeComponent]
})
export class ChangelogComponent {

  public displayableLogs: string[] = [];
  public displayableMergeJson: string[] = [];
  showLogModal:boolean = false;
  showMergeModal:boolean = false;

  constructor(
    private httpClient: HttpClient,
    private wss: WebsocketService
  ){
    this.fetchLoglist();
  //   this.translateLogDirToString();
  }


  public fetchLoglist(): string[]{
    // TODO: Fetch changelog.html
    // fetch("/changelog")
    let dirlist: any[] = []


    this.wss.connect(environment.wsapi+"/listFileInDir");
    this.wss.send({
      "topic": "changelog",
    })

    let response = this.wss.data;
    console.log(response);

    // this.httpClient.get(environment.api+"/listFileInDir/changelog", {
    //   withCredentials: true
    // }).subscribe({
    //   next: (value) => {
    //     console.log(value)
    //     if(typeof value === "object" && value !== null){
    //       if("dirs" in value){
    //         console.log("dirs", value)
    //         // dirlist.push(...(value as {dirs: unknown[]})["dirs"]);
    //         this.displayableLogs = value.dirs as any[];
    //       }
    //     }
    //   },
    //   error: (err) => {
    //     console.error('Error fetch json: ',err);
    //   }
    // })
    // // console.log(dirlist);

    // this.httpClient.get(environment.api+"/listFileInDir/merge", {
    //   withCredentials: true
    // }).subscribe({
    //   next: (value) => {
    //     console.log(value)
    //     if(typeof value === "object" && value !== null){
    //       if("dirs" in value){
    //         console.log("dirs", value)
    //         // dirlist.push(...(value as {dirs: unknown[]})["dirs"]);
    //         this.displayableMergeJson = value.dirs as any[];
    //       }
    //     }
    //   },
    //   error: (err) => {
    //     console.error('Error fetch json: ',err);
    //   }
    // })

    return dirlist;
  }


  public translateLogDirToString(){
    console.log("LogDirList: ", this.displayableLogs)
    let dirSelector = document.getElementById("log-dir-list")
    // for(let dir of this.displayableLogs){
    //   console.log(dir)
    //   const p = document.createElement('p');
    //   p.innerText = dir;
    //   dirSelector!.appendChild(p);
    //   dirSelector?.replaceChild(p, dirSelector.children[])
    // }
  }

  refreshLogList(){
    this.fetchLoglist();
    this.translateLogDirToString();
  }

  viewLog(name:string){
    let cli = new FetchLogService(this.httpClient);
    this.showLogModal = !this.showLogModal;
    cli.fetchLogsToDisplay("changelog", true, false, name);
    cli.fetchLogsToDisplay("changelog", false, false, name);
  }

  viewJson(name:string){
    let cli = new FetchLogService(this.httpClient);
    this.showMergeModal = !this.showMergeModal;
    cli.fetchLogsToDisplay("merge", false, true, name);
    // cli.fetchLogsToDisplay("", false, false, name);
  }

  toggleLogModal(target:string){
    if(target == "merge"){
      this.showMergeModal = !this.showMergeModal;
    } else {
      this.showLogModal = !this.showLogModal;
    }
  }
}