import {
    Component,
    EventEmitter,
    Input,
    Output,
    ViewEncapsulation,
    ChangeDetectionStrategy,
    TemplateRef,
    OnDestroy,
} from '@angular/core';
import { CommonModule } from '@angular/common';

// animations
import { cardModalAnimation } from './utils/animations/card-modal.animation';

// modules
import { AngularSvgIconModule } from 'angular-svg-icon';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

// Enums
import { eCustomCard } from './utils/enums/custom-card.enum';
import { eColor, eGeneralActions, ePosition } from '../../enums';

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

// components
import { CaAppTooltipV2Component } from '../ca-app-tooltip-v2/ca-app-tooltip-v2.component';

@Component({
    selector: 'app-ca-custom-card',
    templateUrl: './ca-custom-card.component.html',
    styleUrls: ['./ca-custom-card.component.scss'],
    animations: [cardModalAnimation('showHideCardBody')],
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    imports: [
        // modules
        CommonModule,
        AngularSvgIconModule,
        NgbModule,
        // components
        CaAppTooltipV2Component,
    ],
})
export class CaCustomCardComponent<T> implements OnDestroy {
    @Input() headerLeftSideTemplate!: TemplateRef<T>;
    @Input() headerRightSideTemplate!: TemplateRef<T>;
    @Input() headerLeftSideContext: any;

    @Input() headerRightSideClass!: string;

    @Input() cardHeight!: number;
    @Input() isAnimationsDisabled = true;
    @Input() cardName!: string;
    @Input() cardSubText: string | null = null;
    @Input() hasArrow: boolean = true;
    @Input() hasPlusIcon: boolean = false;
    @Input() isPlusIconDisabled: boolean = false;
    @Input() plusIconTooltip: string = eGeneralActions.ADD_NEW;
    @Input() isHeaderSvgEnabled!: boolean;
    @Input() counter: number = -1;
    @Input() hasDivider: boolean = true;
    @Input() hasBodyData: boolean = true;
    @Input() hasScrollBody!: boolean;
    @Input() isStayOpen!: boolean;
    @Input() isDisabledCard!: boolean;
    @Input() isHeaderHidden?: boolean = false;
    @Input() isTwoRowTitle?: boolean = false;
    @Input() isAlwaysOpen!: boolean;
    @Input() isShowArrowOnHover?: boolean = false;
    @Input() animationMarginParams = {
        marginTop: '12px',
        marginBottom: '12px',
    };
    @Input() set isCardOpen(value: boolean) {
        if (this.isCardClicked) {
            this.isCardClicked = false;
            return;
        }

        this.onIsCardOpenChange(value);
        this.updateCardAnimationState();
    }

    @Input() customClass!: string;
    @Input() customNameClass!: string;
    @Input() customDividerClass!: string;

    @Output() onActionEvent: EventEmitter<{ check: boolean; action: string }> =
        new EventEmitter<{ check: boolean; action: string }>();
    @Output() onOpenCard: EventEmitter<boolean> = new EventEmitter<boolean>(
        false
    );

    private isCardOpenAnimatedTimeout:
        | ReturnType<typeof setTimeout>
        | undefined;

    private isCardClicked: boolean = false;
    public isHeaderHover!: boolean;
    public noActive: string = eCustomCard.INACTIVE;
    public _isCardOpen!: boolean;
    public isCardOpenAnimated!: boolean;
    public isCardHover: boolean = false;

    public sharedSvgRoutes = SharedSvgRoutes;
    public eColor = eColor;
    public ePosition = ePosition;
    public eGeneralActions = eGeneralActions;

    constructor() {}

    private updateCardAnimationState(forceUpdate: boolean = false): void {
        if (forceUpdate && this.isDisabledCard) return;

        if (this.noActive === eCustomCard.ACTIVE) {
            this.isCardOpenAnimated = true;

            if (this.isCardOpenAnimatedTimeout) {
                clearTimeout(this.isCardOpenAnimatedTimeout);
                this.isCardOpenAnimatedTimeout = undefined;
            }
        } else {
            this.isCardOpenAnimatedTimeout = setTimeout(() => {
                this.isCardOpenAnimated = false;
            }, 300);
        }
    }

    public onIsCardOpenChange(value: boolean): void {
        if (this.isAlwaysOpen) {
            this.noActive = eCustomCard.ACTIVE;
            this._isCardOpen = true;
        } else {
            this.noActive = value ? eCustomCard.ACTIVE : eCustomCard.INACTIVE;
            this._isCardOpen = value;
        }
    }

    public isCardOpenEvent(event: MouseEvent): void {
        if (this.isDisabledCard || this.isAlwaysOpen) return;
        this.isCardClicked = true;

        event.preventDefault();
        event.stopPropagation();

        const newValue = this.noActive === eCustomCard.INACTIVE;
        this.noActive = newValue ? eCustomCard.ACTIVE : eCustomCard.INACTIVE;
        this._isCardOpen = newValue;

        this.updateCardAnimationState();
        this.onOpenCard.emit(this._isCardOpen);
    }

    public onPlusIconClick(event: MouseEvent): void {
        event.stopPropagation();

        if (this.isPlusIconDisabled) return;

        if (this.noActive === eCustomCard.INACTIVE) {
            this.noActive = eCustomCard.ACTIVE;
            this._isCardOpen = true;
            this.updateCardAnimationState(true);
        }

        const actionEventEmit = {
            check: true,
            action: 'plus-action',
        };

        this.onActionEvent.emit(actionEventEmit);
    }

    ngOnDestroy(): void {
        if (this.isCardOpenAnimatedTimeout) {
            clearTimeout(this.isCardOpenAnimatedTimeout);
            this.isCardOpenAnimatedTimeout = undefined;
        }
    }
}