import { Component, OnInit, Input, ViewChildren, QueryList, ElementRef, Renderer2, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'app-swipe-cards',
    templateUrl: './swipe-cards.component.html',
    styleUrls: ['./swipe-cards.component.scss'],
})
export class SwipeCardsComponent implements OnInit {
    @ViewChildren('tinderCard') tinderCards: QueryList<ElementRef>;
    @Input() questions: Array<string>;

    moveOutWidth: number; // value in pixels that a card needs to travel to dissapear from screen
    shiftRequired: boolean; // state variable that indicates we need to remove the top card of the stack
    transitionInProgress: boolean; // state variable that indicates currently there is transition on-going
    heartVisible: boolean;
    crossVisible: boolean;

    tinderCardsArray: Array<ElementRef>;

    @Output() cardEvent = new EventEmitter();
    

    constructor(
        private renderer: Renderer2
    ) { }

    ngOnInit() {}

    ngAfterViewInit() {
        this.moveOutWidth = document.documentElement.clientWidth * 1.5;
        this.tinderCardsArray = this.tinderCards.toArray();
        this.tinderCards.changes.subscribe(()=>{
            this.tinderCardsArray = this.tinderCards.toArray();
            if(this.tinderCardsArray.length === 0) {
                this.cardEvent.emit({ end: true });
            } else {
                this.cardEvent.emit({ end: false });
            }
        });
    }

    toggleChoiceIndicator(cross, heart) {
        this.crossVisible = cross;
        this.heartVisible = heart;
    }

    handleShift() {
        this.transitionInProgress = false;
        this.toggleChoiceIndicator(false,false)
        if (this.shiftRequired) {
            this.shiftRequired = false;
            this.questions.shift();
        };
    }

    handlePan(event) {

        if (event.deltaX === 0 || (event.center.x === 0 && event.center.y === 0) || !this.questions.length) return;
    
        if (this.transitionInProgress) {
            this.handleShift();
        }
        
        this.renderer.addClass(this.tinderCardsArray[0].nativeElement, 'moving');
    
        if (event.deltaX > 0) { this.toggleChoiceIndicator(false,true) }
        if (event.deltaX < 0) { this.toggleChoiceIndicator(true,false) }
    
        let xMulti = event.deltaX * 0.03;
        let yMulti = event.deltaY / 80;
        let rotate = xMulti * yMulti;
    
        this.renderer.setStyle(this.tinderCardsArray[0].nativeElement, 'transform', 'translate(' + event.deltaX + 'px, ' + event.deltaY + 'px) rotate(' + rotate + 'deg)');
    
        this.shiftRequired = true;
    
    }


    handlePanEnd(event) {

        this.toggleChoiceIndicator(false,false);
    
        if (!this.questions.length) return;
    
        this.renderer.removeClass(this.tinderCardsArray[0].nativeElement, 'moving');
    
        let keep = Math.abs(event.deltaX) < 80 || Math.abs(event.velocityX) < 0.5;
        if (keep) {
    
            this.renderer.setStyle(this.tinderCardsArray[0].nativeElement, 'transform', '');
            this.shiftRequired = false;
    
        } else {
    
            let endX = Math.max(Math.abs(event.velocityX) * this.moveOutWidth, this.moveOutWidth);
            let toX = event.deltaX > 0 ? endX : -endX;
            let endY = Math.abs(event.velocityY) * this.moveOutWidth;
            let toY = event.deltaY > 0 ? endY : -endY;
            let xMulti = event.deltaX * 0.03;
            let yMulti = event.deltaY / 80;
            let rotate = xMulti * yMulti;

            this.renderer.setStyle(this.tinderCardsArray[0].nativeElement, 'transform', 'translate(' + toX + 'px, ' + (toY + event.deltaY) + 'px) rotate(' + rotate + 'deg)');

            this.shiftRequired = true;

            console.log(!!(event.deltaX > 0), this.questions[0]);

            setTimeout(() => {
                this.handleShift();
            }, 350);
        }
        
        this.transitionInProgress = true;
    }

    userClickedButton(event, heart) {
        event.preventDefault();
        if (!this.questions.length) return false;
        if (heart) {
            this.tinderCardsArray[0].nativeElement.style.transform = 'translate(' + this.moveOutWidth + 'px, -100px) rotate(-30deg)';
            this.toggleChoiceIndicator(false,true);
            console.log(!!(event.deltaX > 0), this.questions[0]);

            setTimeout(() => {
                this.handleShift();
            }, 350);
        } else {
            this.tinderCardsArray[0].nativeElement.style.transform = 'translate(-' + this.moveOutWidth + 'px, -100px) rotate(30deg)';
            this.toggleChoiceIndicator(true,false);
            console.log(!!(event.deltaX > 0), this.questions[0]);

            setTimeout(() => {
                this.handleShift();
            }, 350);
        };
        this.shiftRequired = true;
        this.transitionInProgress = true;
    }

}
