Untitled

import { Component, HostListener, Input } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MetadataDialogComponent } from '@app-pages/home/components/metadata-dialog/metadata-dialog.component';
import { HomeService } from '@app-pages/home/services/home.service';
import { AgRendererComponent } from 'ag-grid-angular';
import { Subject, takeUntil, switchMap, tap } from 'rxjs';

@Component({
  selector: 'app-tooltip-lp-cell',
  templateUrl: './tooltip-lp-cell.component.html',
  styleUrls: ['./tooltip-lp-cell.component.css'],
})
export class TooltipLPCellComponent implements AgRendererComponent {
  private destroy$ = new Subject<void>();
  private activeTooltip: HTMLElement | null = null; // Mantém referência do tooltip ativo

  readonly TOOLTIP_CLASS = 'cell-tooltip';
  @Input() params: any;

  constructor(private service: HomeService, public dialog: MatDialog) {}

  agInit(params: any): void {
    this.params = params;
  }

  refresh(params: any): boolean {
    this.params = params;
    return true;
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }

  showTooltip(event: MouseEvent) {
    this.hideTooltip(); // Remove qualquer tooltip antes de abrir um novo

    this.service.getMetadata(this.params.data.filename).pipe(
      takeUntil(this.destroy$) // Cancela requisições antigas se houver uma nova
    ).subscribe((metadata) => {
      console.log('showTooltip metadata retorno da API =', metadata);

      const div = document.createElement('div');
      div.classList.add(this.TOOLTIP_CLASS);
      div.style.left = `${event.pageX - 230}px`;
      div.style.top = `${event.pageY + 30}px`;
      div.style.width = '20%';

      div.innerHTML = `
          <div style="margin-bottom: 5px;"><strong>Filename:</strong> ${metadata.filename}</div>
          <div style="margin-bottom: 5px;"><strong>Title:</strong> ${metadata.title}</div>
          <div style="margin-bottom: 5px;"><strong>Technologist Name:</strong> ${metadata.technologist_name}</div>
          <div style="margin-bottom: 5px;"><strong>Technician Name:</strong> ${metadata.technician_name}</div>
          <div style="margin-bottom: 5px;"><strong>Document Date:</strong> ${new Date(metadata.document_date).toLocaleString()}</div>
          <div style="margin-bottom: 5px;"><strong>UTC Date:</strong> ${new Date(metadata.dt_utc).toLocaleString()}</div>
      `;

      document.body.appendChild(div);
      this.activeTooltip = div; // Guarda a referência do tooltip criado
    });
  }

  hideTooltip() {
    if (this.activeTooltip) {
      this.activeTooltip.remove(); // Remove o tooltip ativo
      this.activeTooltip = null;
    }
  }

  viewMetadata(event: MouseEvent, fileName: string) {
    event.preventDefault();
    this.service
      .getMetadata(fileName)
      .pipe(takeUntil(this.destroy$))
      .subscribe({
        next: (metadata) => {
          this.showMetadataModal(metadata);
        },
        error: (error) => {
          console.error('Failed to fetch metadata', error);
        },
      });
  }

  showMetadataModal(metadata: any) {
    const dialogRef = this.dialog.open(MetadataDialogComponent, {
      width: '500px',
      data: metadata,
    });

    dialogRef.afterClosed().subscribe(() => {
      console.log('The dialog was closed');
    });
  }
}