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';

@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) {
    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;
    }
  }

  // Context from Function d:/CodeProjects/recipe_manager/taobin_recipe_manager/server/python_api/merge_recipe.py:searchFnForHtml
  searchLog(id: string){
    var input, filter, logBody, logRow, logP, logContent;
    console.log("searchLog", id);
    // log-disp-texts-changelog_580

    let log_disp = document.getElementById("log-disp-texts-"+id);
    logBody = log_disp!.getElementsByTagName("div")

    input = document.getElementById("searchInput-"+id) as HTMLInputElement;
    filter = input!.value;
    // logBody = document.getElementById("logBody");
    for (let index = 0; index < logBody.length; index++) {
      const element = logBody[index];
      // console.log(element)
      logRow = element.getElementsByTagName("div");
      for(let i = 0; i < logRow.length; i++){
        let p = logRow[i].getElementsByTagName("p");
        // console.log("Total P = ", logRow[i].getElementsByTagName("p").length);

        for(let p_i = 0; p_i < p.length; p_i++){
            let pcontent = p[p_i].textContent || p[p_i].innerText;

            if(pcontent.includes(filter)){
                logRow[i].style.display = "";
                break;
            } else {
                logRow[i].style.display = "none";
            }
        }
    }
    }



  }


  // Add version button
  addVersion(){
    let dvs = document.getElementById("diff_version_select");
    dvs!.innerHTML += `<input class="input input-md input-bordered m-2 bg-green-100" type="number" name="target" placeholder="Target Version" id="target">`;
  }
}