import { CommonModule } from '@angular/common';
import { Component, inject, Input, Output, EventEmitter } from '@angular/core';
import { I18nService } from '../../../services/i18n';
import { DEFAULT_COUNTDOWN_LABELS, } from './types';
import * as i0 from "@angular/core";
/**
 * val-countdown
 *
 * A countdown timer component that counts down to a target date.
 *
 * @example Basic usage
 * ```html
 * <val-countdown
 *   [props]="{
 *     targetDate: '2024-12-31T23:59:59',
 *     format: 'full'
 *   }"
 *   (complete)="onCountdownComplete()"
 * ></val-countdown>
 * ```
 *
 * @example Compact format
 * ```html
 * <val-countdown
 *   [props]="{
 *     targetDate: raffleEndDate,
 *     format: 'compact',
 *     showDays: true,
 *     showSeconds: false,
 *     color: 'danger',
 *     expiredMessage: '¡Sorteo finalizado!'
 *   }"
 * ></val-countdown>
 * ```
 *
 * @example Digital clock style
 * ```html
 * <val-countdown
 *   [props]="{
 *     targetDate: deadline,
 *     format: 'digital',
 *     showLabels: false,
 *     size: 'large'
 *   }"
 * ></val-countdown>
 * ```
 */
export class CountdownComponent {
    constructor() {
        this.complete = new EventEmitter();
        this.tick = new EventEmitter();
        this.i18n = inject(I18nService);
        this.time = {
            days: 0,
            hours: 0,
            minutes: 0,
            seconds: 0,
            totalSeconds: 0,
            isExpired: false,
        };
        this.isExpired = false;
        this.intervalId = null;
    }
    ngOnInit() {
        if (this.props.autoStart !== false) {
            this.start();
        }
    }
    ngOnDestroy() {
        this.stop();
    }
    /**
     * Start the countdown timer.
     */
    start() {
        this.updateTime();
        const interval = this.props.updateInterval || 1000;
        this.intervalId = setInterval(() => this.updateTime(), interval);
    }
    /**
     * Stop the countdown timer.
     */
    stop() {
        if (this.intervalId) {
            clearInterval(this.intervalId);
            this.intervalId = null;
        }
    }
    /**
     * Reset and restart the countdown.
     */
    restart() {
        this.stop();
        this.isExpired = false;
        this.start();
    }
    updateTime() {
        const target = this.getTargetDate();
        const now = new Date();
        const diff = target.getTime() - now.getTime();
        if (diff <= 0) {
            this.time = {
                days: 0,
                hours: 0,
                minutes: 0,
                seconds: 0,
                totalSeconds: 0,
                isExpired: true,
            };
            this.isExpired = true;
            this.stop();
            this.complete.emit({
                targetDate: target,
                completedAt: now,
            });
            return;
        }
        const totalSeconds = Math.floor(diff / 1000);
        const days = Math.floor(totalSeconds / 86400);
        const hours = Math.floor((totalSeconds % 86400) / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const seconds = totalSeconds % 60;
        this.time = {
            days,
            hours,
            minutes,
            seconds,
            totalSeconds,
            isExpired: false,
        };
        this.tick.emit({ time: this.time });
    }
    getTargetDate() {
        const target = this.props.targetDate;
        if (target instanceof Date) {
            return target;
        }
        if (typeof target === 'number') {
            return new Date(target);
        }
        return new Date(target);
    }
    shouldShowDays() {
        if (this.props.showDays === false)
            return false;
        if (this.props.showDays === true)
            return true;
        // Auto: show if more than 0 days or format is full
        return this.time.days > 0 || this.props.format === 'full';
    }
    shouldShowHours() {
        if (this.props.showHours === false)
            return false;
        return true;
    }
    shouldShowMinutes() {
        if (this.props.showMinutes === false)
            return false;
        return true;
    }
    shouldShowSeconds() {
        if (this.props.showSeconds === false)
            return false;
        if (this.props.format === 'minimal')
            return false;
        return true;
    }
    formatNumber(value) {
        if (this.props.padNumbers === false) {
            return String(value);
        }
        return String(value).padStart(2, '0');
    }
    getLabel(unit, value) {
        const labels = this.props.labels || DEFAULT_COUNTDOWN_LABELS;
        const isSingular = value === 1;
        // Get singular or plural form
        const singularKey = unit.slice(0, -1);
        if (isSingular && labels[singularKey]) {
            return labels[singularKey];
        }
        return labels[unit] || unit;
    }
    getExpiredMessage() {
        return this.props.expiredMessage || this.i18n.t('timeExpired');
    }
    getColor() {
        if (this.props.color) {
            return `var(--ion-color-${this.props.color})`;
        }
        return 'var(--ion-color-primary)';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CountdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CountdownComponent, isStandalone: true, selector: "val-countdown", inputs: { props: "props" }, outputs: { complete: "complete", tick: "tick" }, ngImport: i0, template: `
    <div
      class="countdown-container"
      [class]="props.cssClass"
      [class.expired]="isExpired"
      [class.format-full]="props.format === 'full' || !props.format"
      [class.format-compact]="props.format === 'compact'"
      [class.format-minimal]="props.format === 'minimal'"
      [class.format-digital]="props.format === 'digital'"
      [class.size-small]="props.size === 'small'"
      [class.size-medium]="props.size === 'medium' || !props.size"
      [class.size-large]="props.size === 'large'"
      [style.--countdown-color]="getColor()"
    >
      @if (isExpired && props.showExpiredMessage !== false) {
        <div class="expired-message">
          {{ getExpiredMessage() }}
        </div>
      } @else if (!isExpired) {
        <div class="countdown-units">
          @if (shouldShowDays()) {
            <div class="countdown-unit">
              <span class="countdown-value">{{ formatNumber(time.days) }}</span>
              @if (props.showLabels !== false) {
                <span class="countdown-label">{{ getLabel('days', time.days) }}</span>
              }
            </div>
            @if (props.showSeparators !== false && shouldShowHours()) {
              <span class="countdown-separator">{{ props.separator || ':' }}</span>
            }
          }

          @if (shouldShowHours()) {
            <div class="countdown-unit">
              <span class="countdown-value">{{ formatNumber(time.hours) }}</span>
              @if (props.showLabels !== false) {
                <span class="countdown-label">{{ getLabel('hours', time.hours) }}</span>
              }
            </div>
            @if (props.showSeparators !== false && shouldShowMinutes()) {
              <span class="countdown-separator">{{ props.separator || ':' }}</span>
            }
          }

          @if (shouldShowMinutes()) {
            <div class="countdown-unit">
              <span class="countdown-value">{{ formatNumber(time.minutes) }}</span>
              @if (props.showLabels !== false) {
                <span class="countdown-label">{{ getLabel('minutes', time.minutes) }}</span>
              }
            </div>
            @if (props.showSeparators !== false && shouldShowSeconds()) {
              <span class="countdown-separator">{{ props.separator || ':' }}</span>
            }
          }

          @if (shouldShowSeconds()) {
            <div class="countdown-unit">
              <span class="countdown-value">{{ formatNumber(time.seconds) }}</span>
              @if (props.showLabels !== false) {
                <span class="countdown-label">{{ getLabel('seconds', time.seconds) }}</span>
              }
            </div>
          }
        </div>
      }
    </div>
  `, isInline: true, styles: [":host{display:inline-block}.countdown-container{--countdown-color: var(--ion-color-primary);display:inline-flex;align-items:center;justify-content:center}.countdown-units{display:flex;align-items:center;gap:4px}.countdown-unit{display:flex;flex-direction:column;align-items:center;text-align:center}.countdown-value{font-weight:700;font-variant-numeric:tabular-nums;color:var(--countdown-color)}.countdown-label{font-weight:400;color:var(--ion-color-medium);text-transform:lowercase}.countdown-separator{font-weight:700;color:var(--countdown-color);opacity:.6}.expired-message{font-weight:600;color:var(--ion-color-medium)}.size-small .countdown-value{font-size:1.125rem;line-height:1.2}.size-small .countdown-label{font-size:.625rem}.size-small .countdown-separator{font-size:.875rem;margin:0 2px}.size-small .expired-message{font-size:.75rem}.size-medium .countdown-value{font-size:1.75rem;line-height:1.2}.size-medium .countdown-label{font-size:.75rem}.size-medium .countdown-separator{font-size:1.25rem;margin:0 4px}.size-medium .expired-message{font-size:.875rem}.size-large .countdown-value{font-size:2.625rem;line-height:1.2}.size-large .countdown-label{font-size:.875rem}.size-large .countdown-separator{font-size:1.75rem;margin:0 6px}.size-large .expired-message{font-size:1.125rem}.format-full .countdown-units{gap:16px}.format-full .countdown-unit{min-width:60px;padding:8px 12px;background:var(--ion-color-light);border-radius:8px}.format-full .countdown-separator{display:none}.format-full.size-small .countdown-unit{min-width:45px;padding:4px 8px}.format-full.size-large .countdown-unit{min-width:80px;padding:12px 16px}.format-compact .countdown-units{gap:8px}.format-compact .countdown-unit{flex-direction:row;gap:4px}.format-compact .countdown-label{font-size:inherit}.format-compact .countdown-separator{display:none}.format-compact.size-small .countdown-value,.format-compact.size-small .countdown-label{font-size:.875rem}.format-compact.size-medium .countdown-value,.format-compact.size-medium .countdown-label{font-size:1.125rem}.format-compact.size-large .countdown-value,.format-compact.size-large .countdown-label{font-size:1.5rem}.format-minimal .countdown-units{gap:4px}.format-minimal .countdown-label{display:none}.format-minimal .countdown-separator{opacity:.4}.format-digital .countdown-units{gap:0;background:var(--ion-color-dark);padding:8px 16px;border-radius:8px}.format-digital .countdown-value{color:#0f0;font-family:Courier New,monospace}.format-digital .countdown-label{display:none}.format-digital .countdown-separator{color:#0f0;opacity:.8;margin:0 2px}.format-digital.size-small .countdown-units{padding:4px 8px}.format-digital.size-small .countdown-value,.format-digital.size-small .countdown-separator{font-size:1rem}.format-digital.size-large .countdown-units{padding:12px 24px}.format-digital.size-large .countdown-value,.format-digital.size-large .countdown-separator{font-size:3rem}.expired .expired-message{padding:8px 16px;background:var(--ion-color-light);border-radius:8px;color:var(--ion-color-danger)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}:host-context(.urgent) .countdown-value{animation:pulse 1s ease-in-out infinite}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CountdownComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-countdown', standalone: true, imports: [CommonModule], template: `
    <div
      class="countdown-container"
      [class]="props.cssClass"
      [class.expired]="isExpired"
      [class.format-full]="props.format === 'full' || !props.format"
      [class.format-compact]="props.format === 'compact'"
      [class.format-minimal]="props.format === 'minimal'"
      [class.format-digital]="props.format === 'digital'"
      [class.size-small]="props.size === 'small'"
      [class.size-medium]="props.size === 'medium' || !props.size"
      [class.size-large]="props.size === 'large'"
      [style.--countdown-color]="getColor()"
    >
      @if (isExpired && props.showExpiredMessage !== false) {
        <div class="expired-message">
          {{ getExpiredMessage() }}
        </div>
      } @else if (!isExpired) {
        <div class="countdown-units">
          @if (shouldShowDays()) {
            <div class="countdown-unit">
              <span class="countdown-value">{{ formatNumber(time.days) }}</span>
              @if (props.showLabels !== false) {
                <span class="countdown-label">{{ getLabel('days', time.days) }}</span>
              }
            </div>
            @if (props.showSeparators !== false && shouldShowHours()) {
              <span class="countdown-separator">{{ props.separator || ':' }}</span>
            }
          }

          @if (shouldShowHours()) {
            <div class="countdown-unit">
              <span class="countdown-value">{{ formatNumber(time.hours) }}</span>
              @if (props.showLabels !== false) {
                <span class="countdown-label">{{ getLabel('hours', time.hours) }}</span>
              }
            </div>
            @if (props.showSeparators !== false && shouldShowMinutes()) {
              <span class="countdown-separator">{{ props.separator || ':' }}</span>
            }
          }

          @if (shouldShowMinutes()) {
            <div class="countdown-unit">
              <span class="countdown-value">{{ formatNumber(time.minutes) }}</span>
              @if (props.showLabels !== false) {
                <span class="countdown-label">{{ getLabel('minutes', time.minutes) }}</span>
              }
            </div>
            @if (props.showSeparators !== false && shouldShowSeconds()) {
              <span class="countdown-separator">{{ props.separator || ':' }}</span>
            }
          }

          @if (shouldShowSeconds()) {
            <div class="countdown-unit">
              <span class="countdown-value">{{ formatNumber(time.seconds) }}</span>
              @if (props.showLabels !== false) {
                <span class="countdown-label">{{ getLabel('seconds', time.seconds) }}</span>
              }
            </div>
          }
        </div>
      }
    </div>
  `, styles: [":host{display:inline-block}.countdown-container{--countdown-color: var(--ion-color-primary);display:inline-flex;align-items:center;justify-content:center}.countdown-units{display:flex;align-items:center;gap:4px}.countdown-unit{display:flex;flex-direction:column;align-items:center;text-align:center}.countdown-value{font-weight:700;font-variant-numeric:tabular-nums;color:var(--countdown-color)}.countdown-label{font-weight:400;color:var(--ion-color-medium);text-transform:lowercase}.countdown-separator{font-weight:700;color:var(--countdown-color);opacity:.6}.expired-message{font-weight:600;color:var(--ion-color-medium)}.size-small .countdown-value{font-size:1.125rem;line-height:1.2}.size-small .countdown-label{font-size:.625rem}.size-small .countdown-separator{font-size:.875rem;margin:0 2px}.size-small .expired-message{font-size:.75rem}.size-medium .countdown-value{font-size:1.75rem;line-height:1.2}.size-medium .countdown-label{font-size:.75rem}.size-medium .countdown-separator{font-size:1.25rem;margin:0 4px}.size-medium .expired-message{font-size:.875rem}.size-large .countdown-value{font-size:2.625rem;line-height:1.2}.size-large .countdown-label{font-size:.875rem}.size-large .countdown-separator{font-size:1.75rem;margin:0 6px}.size-large .expired-message{font-size:1.125rem}.format-full .countdown-units{gap:16px}.format-full .countdown-unit{min-width:60px;padding:8px 12px;background:var(--ion-color-light);border-radius:8px}.format-full .countdown-separator{display:none}.format-full.size-small .countdown-unit{min-width:45px;padding:4px 8px}.format-full.size-large .countdown-unit{min-width:80px;padding:12px 16px}.format-compact .countdown-units{gap:8px}.format-compact .countdown-unit{flex-direction:row;gap:4px}.format-compact .countdown-label{font-size:inherit}.format-compact .countdown-separator{display:none}.format-compact.size-small .countdown-value,.format-compact.size-small .countdown-label{font-size:.875rem}.format-compact.size-medium .countdown-value,.format-compact.size-medium .countdown-label{font-size:1.125rem}.format-compact.size-large .countdown-value,.format-compact.size-large .countdown-label{font-size:1.5rem}.format-minimal .countdown-units{gap:4px}.format-minimal .countdown-label{display:none}.format-minimal .countdown-separator{opacity:.4}.format-digital .countdown-units{gap:0;background:var(--ion-color-dark);padding:8px 16px;border-radius:8px}.format-digital .countdown-value{color:#0f0;font-family:Courier New,monospace}.format-digital .countdown-label{display:none}.format-digital .countdown-separator{color:#0f0;opacity:.8;margin:0 2px}.format-digital.size-small .countdown-units{padding:4px 8px}.format-digital.size-small .countdown-value,.format-digital.size-small .countdown-separator{font-size:1rem}.format-digital.size-large .countdown-units{padding:12px 24px}.format-digital.size-large .countdown-value,.format-digital.size-large .countdown-separator{font-size:3rem}.expired .expired-message{padding:8px 16px;background:var(--ion-color-light);border-radius:8px;color:var(--ion-color-danger)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}:host-context(.urgent) .countdown-value{animation:pulse 1s ease-in-out infinite}\n"] }]
        }], propDecorators: { props: [{
                type: Input
            }], complete: [{
                type: Output
            }], tick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 