import {
  ChangeDetectionStrategy,
  Component,
  computed,
  input,
  ViewEncapsulation,
} from '@angular/core';

export const ProgressBarMode = {
  Determinate: 'determinate',
  Indeterminate: 'indeterminate',
} as const;

export type ProgressBarMode = (typeof ProgressBarMode)[keyof typeof ProgressBarMode];

@Component({
  selector: 'ui-progress-bar',
  template: ` <div class="ui-progress-bar__bar" [style.width]="width()"></div> `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [],
  host: {
    '[class]': '["ui-progress-bar", modeClass()]',
  },
})
export class ProgressBarComponent {
  mode = input<ProgressBarMode>(ProgressBarMode.Determinate);

  modeClass = computed(() => {
    return `ui-progress-bar__${this.mode()}`;
  });

  /**
   * Value between 0 and 100 representing the percentage of the bar filled.
   */
  value = input<number>(50);

  maxValue = input<number>(100);

  width = computed(() => {
    if (this.mode() === ProgressBarMode.Indeterminate) {
      return '100%';
    }

    const value = this.value();
    const maxValue = this.maxValue();

    return `${(value / maxValue) * 100}%`;
  });
}
