import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
import { toSignal } from '@angular/core/rxjs-interop'
import { i18nPipe } from '@start9labs/shared'
import { TimeService } from 'src/app/services/time.service'

@Component({
  selector: 'metrics-uptime',
  template: `
    @if (uptime(); as time) {
      <div>
        <b>{{ time.days }}</b>
        {{ 'Days' | i18n }}
      </div>
      <div>
        <b>{{ time.hours }}</b>
        {{ 'Hours' | i18n }}
      </div>
      <div>
        <b>{{ time.minutes }}</b>
        {{ 'Minutes' | i18n }}
      </div>
      <div>
        <b>{{ time.seconds }}</b>
        {{ 'Seconds' | i18n }}
      </div>
    } @else {
      {{ 'Loading' | i18n }}...
    }
  `,
  styles: `
    :host {
      height: 100%;
      min-height: var(--tui-height-l);
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    b {
      display: block;
      font: var(--tui-typography-heading-h5);
    }

    :host-context(tui-root._mobile) {
      font: var(--tui-typography-ui-2xs);
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [i18nPipe],
})
export class UptimeComponent {
  readonly uptime = toSignal(inject(TimeService).uptime$)
}
