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

//Modules
import { CommonModule } from '@angular/common';
import { AngularSvgIconModule } from 'angular-svg-icon';

// pipes
import { ToastBackgroundPipe, ToastStackPipe } from './pipes';

// svg routes
import { SharedSvgRoutes } from '../../utils/svg-routes';

// enums
import { eToastType } from './enums';
import { animate, style, transition, trigger } from '@angular/animations';

@Component({
    imports: [
        CommonModule,
        AngularSvgIconModule,
        ToastBackgroundPipe,
        ToastStackPipe,
    ],
    selector: 'app-ca-toast-messages',
    templateUrl: './ca-toast-messages-component.html',
    styleUrls: ['./ca-toast-messages-component.scss'],
    animations: [
        trigger('fadeSlide', [
            transition('void => in', [
                style({
                    opacity: 0,
                    transform: 'translateX(-50%) translateY(20px) scale(0.8)',
                }),
                animate(
                    '300ms cubic-bezier(0.19, 1, 0.22, 1)',
                    style({
                        opacity: 1,
                        transform: 'translateX(-50%) translateY(0) scale(1)',
                    })
                ),
            ]),
            transition('in => out', [
                animate(
                    '300ms cubic-bezier(0.19, 1, 0.22, 1)',
                    style({
                        opacity: 0,
                        transform:
                            'translateX(-50%) translateY(20px) scale(0.8)',
                    })
                ),
            ]),
        ]),
    ],
})
export class CaToastMessagesComponent {
    @Input() type!: eToastType;
    @Input() toastTitle!: string;
    @Input() toastMessage!: string;
    @Input() additionalMessage!: string;
    @Input() isFailedMessage!: boolean;
    @Input() isStorybookExample!: boolean;

    @Input() set toastIndex(value: number) {
        this._toastIndex = value;

        clearTimeout(this.autoCloseTimer);

        if (!this.isFailedMessage && this._toastIndex === this._toastLength - 1)
            this.startAutoCloseTimer();
    }

    @Input() set toastLength(value: number) {
        this._toastLength = value;

        clearTimeout(this.autoCloseTimer);

        if (!this.isFailedMessage && this._toastIndex === this._toastLength - 1)
            this.startAutoCloseTimer();
    }

    @Output() removeToast = new EventEmitter<void>();
    @Output() tryAgain = new EventEmitter<void>();

    private autoCloseTimer: any;

    public isVisible = true;
    public isHoverActive: boolean = false;

    public _toastIndex: number = 0;
    public _toastLength: number = 1;

    // svg-routes
    public sharedSvgRoutes = SharedSvgRoutes;

    constructor() {}

    public handleToastHover(isHover: boolean): void {
        this.isHoverActive = isHover;

        if (isHover) {
            clearTimeout(this.autoCloseTimer);
        } else {
            this.startAutoCloseTimer(500);
        }
    }

    public startCloseAnimation() {
        this.isVisible = false;
    }

    public onAnimationDone() {
        if (!this.isVisible) {
            this.removeToast.emit();
        }
    }

    private startAutoCloseTimer(closeDelay: number = 3000): void {
        this.autoCloseTimer = setTimeout(() => {
            this.startCloseAnimation();
        }, closeDelay);
    }

    public onTryAgain(): void {
        this.tryAgain.emit();
        this.startCloseAnimation();
    }
}