import { Directive, HostListener, ElementRef, Output, Input, EventEmitter, AfterContentInit } from '@angular/core';
import { Observable } from 'rxjs/Rx'
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/takeUntil';
import 'rxjs/add/operator/concatMap';
import { Subject } from 'rxjs/Subject';

@Directive({
  selector: '[swipeEvent]'
})
export class SwipeEventDirective implements AfterContentInit {

    @Input() swipeWidth;
    @Output() onSwipeEvent = new EventEmitter();

    constructor(private el: ElementRef) { }

    ngAfterContentInit() {
        this.moveAndDelete('mousedown', 'mousemove', 'mouseup', 'mouseout');
        this.moveAndDelete('touchstart', 'touchmove', 'touchend', 'touchcancel');
    }

    private moveEle = ele => px => ele.style.transform = 'translateX('+ px +'px)';

    private resetPos = ele => () => ele.style.transform = 'translateX(0px)';

    private emitEvent = px => {
        if(Math.abs(px) > this.swipeWidth) {
            this.onSwipeEvent.emit({right: px > 0});
            return true;
        }
        return false;
    }

    private getX = ev => {
        if(ev.screenX) {
            return ev.screenX;
        } else if(ev.touches && ev.touches[0].screenX) {
            return ev.touches[0].screenX;
        }
        return false;
    }

    private moveAndDelete = (evStart:string, evMove:string, evEnd:string, evCancel:string) => {
        const start: Observable<any>   = Observable.fromEvent(this.el.nativeElement, evStart);
        const move: Observable<any>    = Observable.fromEvent(this.el.nativeElement, evMove);
        const end: Observable<any>     = Observable.fromEvent(this.el.nativeElement, evEnd);
        const cancel: Observable<any>  = Observable.fromEvent(this.el.nativeElement, evCancel);
        const moveEle: Function        = this.moveEle(this.el.nativeElement.querySelector('.container'));
        const resetPos                 = this.resetPos(this.el.nativeElement.querySelector('.container'));
        const eventEmitted             = new Subject<string>();

        start
            .map( ev => this.getX(ev) )
            .concatMap( start =>
                move
                    .map(ev => {
                        const delta: number = this.getX(ev) - start;
                        moveEle(delta);
                        if(this.emitEvent(delta)) {
                            eventEmitted.next();
                            resetPos();
                        }
                    })
                    .takeUntil(cancel)
                    .takeUntil(end)
                    .takeUntil(eventEmitted)
            )
            .subscribe();
        cancel.subscribe(resetPos)
        end.subscribe(resetPos)
    }

}