import { Component, OnInit, OnDestroy } from '@angular/core';
import { IonHeader, IonButton, IonContent, IonIcon, IonItem, IonLabel, IonList, 
  IonListHeader, IonCardHeader, IonCardTitle, IonAvatar, IonCardContent, IonTitle, IonCard, IonToolbar, IonInput, IonSearchbar } from '@ionic/angular/standalone';
import { Router } from '@angular/router';

@Component({
  selector: 'app-drift-bottle',
  template: `
    
    <ion-content [fullscreen]="true">
      <div class="top-image" (click)="addRipple($event)">
        <img src="assets/img/漂流瓶.jpg" alt="漂流瓶">
      </div>
      
      <!-- 其他内容可以放在这里 -->
      
      <!-- 左边的按钮 -->
      <div class="button-container left-button">
        <img src="assets/img/扔一个.png" alt="扔漂流瓶" class="circular-button">
      </div>

      <!-- 右边的按钮 -->
      <div class="button-container right-button">
        <img src="assets/img/捞一个.png" alt="捞漂流瓶" class="circular-button">
      </div>

      <!-- 背景音乐 -->
      <audio #backgroundAudio id="backgroundAudio" autoplay loop>
        <source src="assets/audio/海浪.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>
    </ion-content>
  `,
  styleUrls: ['./drift-bottle.component.scss'],
  standalone: true,
  imports: [IonHeader, IonToolbar, IonTitle, IonContent,
            IonList, IonListHeader, IonItem, IonCardTitle,
            IonLabel, IonIcon, IonButton, IonCardContent, IonAvatar,
            IonInput, IonSearchbar, IonCard, IonCardHeader
          ]
})
export class DriftBottleComponent implements OnInit, OnDestroy {

  constructor(private router: Router) { }

  ngOnInit(): void {
    const audioElement = document.getElementById('backgroundAudio') as HTMLAudioElement;
    if (audioElement) {
      audioElement.play();
    }
  }

  ngOnDestroy(): void {
    const audioElement = document.getElementById('backgroundAudio') as HTMLAudioElement;
    if (audioElement) {
      audioElement.pause();
      audioElement.currentTime = 0; // Reset the audio to the beginning
    }
  }

  goTab1(): void {
    this.router.navigate(['tabs/tab1']);
  }

  addRipple(event: MouseEvent): void {
    const container = event.currentTarget as HTMLElement;
    const rect = container.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;

    // 创建涟漪元素
    const ripple = document.createElement('span');
    ripple.classList.add('ripple');

    // 设置涟漪的位置和大小
    ripple.style.left = `${x}px`;
    ripple.style.top = `${y}px`;
    ripple.style.width = ripple.style.height = '100px'; // 可根据需要调整

    // 添加到DOM并触发动画
    container.appendChild(ripple);

    // 动画结束后移除涟漪元素
    setTimeout(() => {
      ripple.remove();
    }, 600); // 应与CSS动画时间相匹配
  }
}