front/src/app/components/share-modal/share-modal.component.ts

import { CommonModule } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NavigationEnd, Router } from '@angular/router';
import { Subject, Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
import { FriendsService } from '../../services/friends/friends.service';
import { ModalService } from '../../services/modal/modal.service';
import { PinService } from '../../services/pin/pin.service';

@Component({
  selector: 'app-share-modal',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './share-modal.component.html',
})
export class ShareModalComponent implements OnInit, OnDestroy {
  modalId: string = 'share-modal';
  isShareModalOpen = false;
  private modalSub!: Subscription;
  private routerSubscription!: Subscription;
  isFriendModalOpen: boolean = false;
  hasAcceptedFriends: boolean = false;
  hasPendingFriends: boolean = false;
  searchTerm: string = '';
  searchTermChanged = new Subject<string>();
  listUser: any[] = [];
  listFriend: any[] = [];
  pinId: string = '';

  constructor(
    private modalService: ModalService,
    private friendService: FriendsService,
    private pinService: PinService,
    private router: Router
  ) {}

  ngOnInit() {
    this.modalSub = this.modalService
      .getModalState(this.modalId)
      .subscribe((open) => {
        this.isShareModalOpen = open;
        if (open) {
          this.getFriend();
          this.pinId = this.modalService.getCurrentPinId();
          setTimeout(() => this.moveModalToBody(), 0);
        }
      });

    // S'abonner aux événements de navigation du router
    this.routerSubscription = this.router.events
      .pipe(filter((event) => event instanceof NavigationEnd))
      .subscribe(() => {
        // Attendre que le DOM soit mis à jour après la navigation
        setTimeout(() => this.moveModalToBody(), 0);
      });
  }

  ngOnDestroy() {
    this.modalSub?.unsubscribe();
    if (this.routerSubscription) {
      this.routerSubscription.unsubscribe();
    }
  }

  openShareModal() {
    this.modalService.openModal(this.modalId);
  }

  closeShareModal() {
    this.modalService.closeModal(this.modalId);
  }

  ngAfterViewInit() {
    // Appel initial pour déplacer le modal
    this.moveModalToBody();
  }

  private moveModalToBody(): void {
    const modal = document.getElementById('share-modal');
    if (modal && modal.parentElement !== document.body) {
      document.body.appendChild(modal);
    }
    const bg = document.getElementById('share-modal-background');
    if (bg && bg.parentElement !== document.body) {
      document.body.appendChild(bg);
    }
  }

  onSearchTermChange(value: string): void {
    if (!this.listFriend) return;

    if (value.trim() === '') {
      this.listUser = [...this.listFriend];
    } else {
      this.listUser = this.listFriend.filter((friend) =>
        friend.username?.toLowerCase().includes(value.toLowerCase())
      );
    }
  }

  protected getFriend() {
    this.friendService.getFriend().subscribe((friends: any[]) => {
      this.listFriend = [];
      this.listUser = [];

      // Récupérer les détails de chaque ami
      friends.forEach((friend) => {
        this.friendService
          .getFriendById(friend.friend_user_id)
          .subscribe((userDetails: any) => {
            const friendWithDetails = {
              ...friend,
              username: userDetails.username,
            };
            this.listFriend.push(friendWithDetails);
            this.listUser.push(friendWithDetails);
          });
      });
    });
  }

  sharePin(friendId: string) {
    if (!this.pinId) {
      console.error('No pin ID available');
      return;
    }

    this.pinService.sharePin(this.pinId, friendId).subscribe((data: any) => {
      this.closeShareModal();
    });
  }
}