import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CountdownComponent, CountdownEvent } from 'ngx-countdown';

/**
 * Interface for the return event os emitters.
 * @interface
 */
interface ReturnEvent {
  /**
   * The time left in the countdown.
   */
  left: number;
}

/**
 * Represents the SqCountdownComponent, a component for countdown.
 *
 * @example
 * <sq-countdown [leftTime]="10"></sq-countdown>
 */
@Component({
  selector: 'sq-countdown',
  templateUrl: './sq-countdown.component.html',
  styleUrls: ['./sq-countdown.component.scss'],
  standalone: true,
  imports: [CountdownComponent],
})
export class SqCountdownComponent {
  /**
   * Starting time to countdown (e.g., 5.5, 30) (Unit: seconds).
   */
  @Input() leftTime = 10;

  /**
   * Formats a date value, pls refer to [Accepted patterns](https://angular.io/api/common/DatePipe#usage-notes).
   */
  @Input() format?: string = 'mm:ss';

  /**
   * Should be trigger type `notify` event on the x second. When values is `0` will be trigger every time.
   */
  @Input() notify?: number[] | number;

  /**
   * Event emitter for when the countdown starts.
   */
  @Output() startEmitter: EventEmitter<ReturnEvent> = new EventEmitter();

  /**
   * Event emitter for when the count reaches the input notify times.
   */
  @Output() notifyEmitter: EventEmitter<ReturnEvent> = new EventEmitter();

  /**
   * Event emitter for when the countdown ends.
   */
  @Output() doneEmitter: EventEmitter<ReturnEvent> = new EventEmitter();

  /**
   * Map the CountdownEvents to emit startEmitter, notifyEmitter or doneEmitter.
   * @param event - The event associated with the CountdownEvents.
   */
  eventMap(event: CountdownEvent) {
    const action = event.action as 'start' | 'notify' | 'done';
    if (action && this[`${action}Emitter`]) {
      const returnEvent: ReturnEvent = {
        left: event.left,
      };
      this[`${action}Emitter`].emit(returnEvent);
    }
  }
}