import { Directive, ElementRef, HostBinding, OnInit, Renderer2, input } from '@angular/core';
import { unit } from '../models';

@Directive()
export abstract class PiBaseAffixDirective implements OnInit {
  @HostBinding('class') get classes(): string {
    return ['pi-affix', `pi-affix__appearance--${this.appearance()}`].join(' ');
  }

  readonly unit = input<unit | string>();
  readonly appearance = input<'ghost' | 'fill'>('ghost');

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
    const unitValue = this.unit();
    if (unitValue) {
      const span = this.renderer.createElement('span');
      const text = this.renderer.createText(unitValue);

      this.renderer.appendChild(span, text);
      this.renderer.appendChild(this.el.nativeElement, span);
    }
  }
}

@Directive({ selector: 'pi-prefix', })
export class PiPrefixDirective extends PiBaseAffixDirective {
  @HostBinding('class') className = 'pi-affix__prefix';
}

@Directive({ selector: 'pi-suffix', })
export class PiSuffixDirective extends PiBaseAffixDirective {
  @HostBinding('class') className = 'pi-affix__suffix';
}