import { Directive, Output, ElementRef, OnDestroy, OnInit, EventEmitter, Input } from '@angular/core';
import ResizeObserver from 'resize-observer-polyfill';


const entriesMap = new WeakMap();

const ro = new ResizeObserver(entries => {
    for (const entry of entries) {
        if (entriesMap.has(entry.target)) {
            const comp = entriesMap.get(entry.target);
            comp._resizeCallback(entry);
        }
    }
});

@Directive({
    selector: '[resizeObserver]'
})
export class ResizeObserverDirective implements OnInit, OnDestroy {
    @Input('resizeObserver') target: ElementRef;

    @Output() resize = new EventEmitter();

    constructor(public el: ElementRef) {
    }


    _resizeCallback(entry) {
        entry['bindintClientRect'] = entry.target.getBoundingClientRect();
        // console.log(entry.contentRect, entry.bindintClientRect);
        this.resize.emit(entry);
    }

    ngOnInit() {
        const target = this.target ?  this.target.nativeElement : this.el.nativeElement;
        entriesMap.set(target, this);
        ro.observe(target);
    }

    ngOnDestroy() {
        const target = this.el.nativeElement;
        ro.unobserve(target);
        entriesMap.delete(target);
    }

}