import { Component, OnDestroy, OnInit } from '@angular/core';
import { AlertController, NavController } from '@ionic/angular';

@Component({
  selector: 'app-tree',
  templateUrl: 'tree.page.html',
  styleUrls: ['tree.page.scss']
})
export class TreePage implements OnInit, OnDestroy {
  timer: any;
  minutes: number = 0;
  seconds: number = 0;
  isRunning: boolean = false;
  isPlayingMusic: boolean = false;
  selectedScene: string = 'tree';
  isPaused: boolean = true; // Start with paused (dark) icon
  exitClicked: boolean = false; // Track if exit button is clicked

  constructor(private navCtrl: NavController, private alertController: AlertController) {}

  ngOnInit() {
    // No need to start the timer here; it starts when user interacts with it
  }

  startTimer() {
    this.stopTimer();
    console.log('Timer started');
    this.isRunning = true;
    this.timer = setInterval(() => {
      this.seconds++;
      if (this.seconds >= 60) {
        this.seconds = 0;
        this.minutes++;
      }
    }, 1000);
  }

  stopTimer() {
    if (this.timer) {
      clearInterval(this.timer);
      console.log('Timer stopped');
    }
    this.isRunning = false;
  }

  togglePauseResume() {
    if (this.minutes === 0 && this.seconds === 0) {
      // If time is zero, start the timer
      this.startTimer();
      this.isPaused = false; // Set to false (bright) for play icon
      console.log('Timer started');
    } else {
      // Toggle pause/play and update icon brightness
      if (this.isPaused) {
        this.resumeTimer();
        console.log('Timer resumed');
      } else {
        this.pauseTimer();
        console.log('Timer paused');
      }
      this.isPaused = !this.isPaused; // Toggle the brightness
    }
  }

  pauseTimer() {
    this.stopTimer();
  }

  resumeTimer() {
    this.startTimer();
  }

  resetTimer() {
    this.stopTimer();
    this.minutes = 0;
    this.seconds = 0;
    this.isPaused = true; // Reset to paused state
    console.log('Timer reset');
  }

  toggleMusic() {
    this.isPlayingMusic = !this.isPlayingMusic;
    console.log(this.isPlayingMusic ? 'Music playing' : 'Music paused');
    // Add logic to play or pause music
  }

  async confirmExit() {
    this.stopTimer();
    this.isPaused = true; // Ensure the pause icon is dark when exiting
    this.exitClicked = true; // Set exit button clicked to true
    const alert = await this.alertController.create({
      header: 'Confirm Exit',
      message: 'Are you sure you want to exit and reset the timer?',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Exit cancelled');
            this.exitClicked = false; // Reset exit button clicked
          }
        },
        {
          text: 'Confirm',
          handler: () => {
            this.resetTimer();
            this.navCtrl.back();
            console.log('Exited and timer reset');
            this.exitClicked = false; // Reset exit button clicked
          }
        }
      ]
    });

    await alert.present();
  }

  exitButtonColor() {
    return this.exitClicked ? 'primary' : 'medium';
  }

  ngOnDestroy() {
    this.stopTimer();
  }
  
  selectScene(scene: string) {
    this.selectedScene = scene;
    console.log('Selected scene:', scene);
  }

  getImageSource(): string {
    switch(this.selectedScene) {
      case 'rain':
        return '../../../assets/img/rain.jpg';
      case 'sunny':
        return '../../../assets/img/sunny.jpg';
      case 'cloudy':
        return '../../../assets/img/cloudy.jpg';
      case 'night':
        return '../../../assets/img/night.jpg';
      default:
        return '../../../assets/img/tree.jpg';
    }
  }

  getTitle(): string {
    switch(this.selectedScene) {
      case 'rain':
        return 'Rain';
      case 'sunny':
        return 'Sunny';
      case 'cloudy':
        return 'Cloudy';
      case 'night':
        return 'Night';
      default:
        return 'Tree';
    }
  }
}
