import {
    Directive,
    ElementRef,
    Inject,
    Input,
    OnDestroy,
    OnInit,
} from '@angular/core';

import { DOCUMENT } from '@angular/common';

@Directive({
    selector: '[fixedButScrollableX]',
})
export class FixedButXScrollableDirective implements OnInit, OnDestroy {
    public scrollEvent: () => void;

    constructor(
        @Inject(DOCUMENT)
        private _document: Document,
        @Inject('window')
        private _window: Window,
        private _elementRef: ElementRef,
    ) {}

    public ngOnInit() {
        this.scrollEvent = () => {
            const x = 0 - this._window.scrollX;
            this._elementRef.nativeElement
                .style.transform = `translateX(${x}px)`;
        };
        this._document.addEventListener('scroll', this.scrollEvent);
    }

    public ngOnDestroy() {
        this._document.removeEventListener('scroll', this.scrollEvent);
    }
}