/**
 * Hand Display Object
 * Affiche une main de Riichi avec options de position et orientation
 */

class Hand {
  constructor(options = {}) {
    this.label = options.label || 'Main';
    this.position = options.position || 'left-label'; // 'left-label' or 'top-label'
    this.tilt = options.tilt || 'none'; // 'none', 'left' (90deg), 'right' (-90deg), 'upside-down' (180deg)
    this.containerId = options.containerId || 'tiles-display';
    this.apiUrl = options.apiUrl || '/api/random_hand';
  }

  /**
   * Récupère une main aléatoire et l'affiche
   */
  async render() {
    try {
      const response = await fetch(this.apiUrl);
      const data = await response.json();
      this.displayHand(data.hand);
    } catch (error) {
      console.error('Erreur lors de la récupération de la main:', error);
    }
  }

  /**
   * Affiche la main dans le DOM
   * @param {Array} tiles - Tableau des tuiles à afficher
   */
  displayHand(tiles) {
    const container = document.getElementById(this.containerId);
    
    // Créer la section de la main
    const handDiv = document.createElement('div');
    const classNames = `hand-display ${this.position}`;
    if (this.tilt !== 'none') {
      handDiv.className = `${classNames} tilt-${this.tilt}`;
    } else {
      handDiv.className = classNames;
    }
    
    // Créer le label
    const label = document.createElement('div');
    label.className = 'hand-label';
    label.textContent = this.label;
    handDiv.appendChild(label);
    
    // Créer la grille de tuiles
    const handTiles = document.createElement('div');
    handTiles.className = 'hand-tiles';
    
    tiles.forEach(tile => {
      const tileDiv = document.createElement('div');
      tileDiv.className = 'hand-tile-item';
      tileDiv.innerHTML = tile.svg;
      handTiles.appendChild(tileDiv);
    });
    
    handDiv.appendChild(handTiles);
    container.appendChild(handDiv);
  }
}