import {
  Component,
  HostBinding,
  Input,
  ViewChild,
  ViewContainerRef,
} from '@angular/core';
import { CircularComponent } from './circular/circular.component';

export type primaryColor =
  | 'var(--green-100)'
  | 'var(--blue-100)'
  | 'var(--red-100)'
  | 'var(--yellow-100)'
  | 'var(--purple-100)';
export type secondaryColor =
  | 'var(--green-050)'
  | 'var(--blue-050)'
  | 'var(--red-050)'
  | 'var(--yellow-050)'
  | 'var(--purple-050)';
export type quaternaryColor =
  | 'var(--green-300)'
  | 'var(--blue-300)'
  | 'var(--red-300)'
  | 'var(--yellow-300)'
  | 'var(--purple-300)';

@Component({
  selector: 'app-progress',
  templateUrl: './progress.component.html',
  styleUrls: ['./progress.component.scss'],
})
export class ProgressComponent {
  @ViewChild('progressHost', { read: ViewContainerRef })
  progressHost!: ViewContainerRef;

  @HostBinding('style.--percent') @Input() percent = 50;
  @HostBinding('style.--size') @Input() size = '160px';
  @HostBinding('style.--fill') @Input() fill: primaryColor = 'var(--green-100)';
  @HostBinding('style.--stroke') @Input() stroke: secondaryColor =
    'var(--green-050)';
  @HostBinding('style.--subtitleColor')
  @Input()
  subtitleColor: quaternaryColor = 'var(--green-300)';

  @Input() title = '';
  @Input() subtitle = '';

  ngAfterViewInit() {
    this.progressHost.clear();
    this.progressHost.createComponent(CircularComponent);
  }
}
