import { Component, Input, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'switch',
  templateUrl: './switch.component.html',
  styleUrls: ['./switch.component.scss'],
})
export class SwitchComponent {
  public constructor(private el: ElementRef) {}
  @ViewChild('inputRef') public input!: any;
  @Input() public size: string = 's';
  @Input() public checked: boolean = false;

  ngOnInit(): void {
    this.setBaseSize();
  }

  ngAfterViewInit(): void {
    this.input.nativeElement.checked = this.checked;
  }

  private setBaseSize(): void {
    if (this.size === 's') {
      this.el.nativeElement.style.setProperty('--base-size', '0.3rem');
    } else if (this.size === 'm') {
      this.el.nativeElement.style.setProperty('--base-size', '0.4rem');
    } else if (this.size === 'l') {
      this.el.nativeElement.style.setProperty('--base-size', '0.5rem');
    } else {
      this.el.nativeElement.style.setProperty('--base-size', '0.3rem');
    }
  }
}
