import {
  ChangeDetectionStrategy,
  Component,
  computed,
  input,
} from '@angular/core'
import { TuiProgress } from '@taiga-ui/kit'
import { T } from '@start9labs/start-sdk'
import { DataComponent } from './data.component'
import { i18nKey } from '@start9labs/shared'

const LABELS: Record<string, i18nKey> = {
  percentageUsed: 'Percentage used',
  capacity: 'Capacity',
  used: 'Used',
  available: 'Available',
}

@Component({
  selector: 'metrics-storage',
  template: `
    <progress
      tuiProgressBar
      [max]="100"
      [attr.value]="value()?.percentageUsed?.value"
    ></progress>
    <metrics-data [labels]="labels" [value]="value()" />
  `,
  styles: `
    progress {
      height: 1.5rem;
      width: 80%;
      margin: 4.25rem auto;
      border-radius: 0;
      clip-path: none;
      mask: linear-gradient(to right, #000 80%, transparent 80%);
      mask-size: 5% 100%;
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [TuiProgress, DataComponent],
})
export class StorageComponent {
  readonly value = input<T.Metrics['disk']>()

  readonly used = computed(
    (
      capacity = this.value()?.capacity?.value,
      used = this.value()?.used?.value,
    ) =>
      capacity && used
        ? (
            (Number.parseFloat(used) / Number.parseFloat(capacity)) *
            100
          ).toFixed(1)
        : '-',
  )

  readonly labels = LABELS
}
