import {Component, inject, OnInit} from '@angular/core'
import {LabelService} from '../services/label.service'
import {ModalController} from '@ionic/angular'
import {NewLabelModalComponent} from './new-label-modal/new-label-modal.component'

@Component({
  selector: 'app-label',
  templateUrl: './label.page.html',
  styleUrls: ['./label.page.scss'],
})
export class LabelPage implements OnInit {
  fabIsVisible = true

  labelService = inject(LabelService)
  #modalController = inject(ModalController)

  constructor() { }

  ngOnInit() {
  }

  async presentModal() {
    const modal = await this.#modalController.create({
      component: NewLabelModalComponent,
      cssClass: 'my-custom-class',
    })
    modal.onDidDismiss().then(d => this.handleModalDismiss(d))
    return await modal.present()

  }

  /**
   * A handler that ensures that the floating action button is hidden when the
   * user scrolls through the task list.
   */
  logScrollStart(): void {
    this.fabIsVisible = false
  }

  /**
   * A handler that shows the FAB after scrolling has stopped and 1.5 seconds
   * have passed.
   */
  logScrollEnd(): void {
    setTimeout(() => this.fabIsVisible = true, 1500)
  }

  /**
   * Create a new label when the modal is dismissed by clicking the save button.
   * If the modal is dismissed by clicking the cancel button nothing happens.
   *
   * @param data The data passed from the modal.
   * @private
   */
  private handleModalDismiss(data: any) {
    // If no data is passed the method hasn't got anymore work to do.
    if (data.data === undefined) {
      return
    }

    this.labelService.createLabel(data.data.name, data.data.color)
  }
}
