import { Directive, EmbeddedViewRef, Inject, Input, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
import { HypermediaForm } from '../components';
import { PARENT_FORM } from '../components/parent-form';
import { Subscription } from 'rxjs';

@Directive({
    selector: '[hmFormValue]'
})
export class FormValueDirective implements OnDestroy {
    @Input() hmFormValue;
    embeddedViewRef: EmbeddedViewRef<{ $implicit: any }>;
    subscription: Subscription;

    constructor(@Inject(PARENT_FORM) form: HypermediaForm,
                viewContainerRef: ViewContainerRef,
                templateRef: TemplateRef<{ $implicit: any }>) {
        this.subscription = form.valueChanged
            .asObservable()
            .subscribe(value => {
                if (!this.embeddedViewRef) {
                    this.embeddedViewRef = viewContainerRef.createEmbeddedView(templateRef, { $implicit: value });
                } else {
                    this.embeddedViewRef.context.$implicit = value;
                }
            });
    }

    ngOnDestroy(): void {
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }
}