import { ElementRef, Renderer2 } from '@angular/core';

export class TableCardViewHelper {
    static isCardFlippedArrayComparasion: number[] = [];
    static isCardFlippedCheckInCards: number[] = [];

    private static toggleTransition(
        isResize: boolean,
        cardsContainer: ElementRef,
        renderer: Renderer2
    ): void {
        if (!cardsContainer) {
            return;
        }

        const flipCardContents =
            cardsContainer.nativeElement.querySelectorAll('.flip-card-content');

        flipCardContents.forEach((content: HTMLElement) => {
            if (isResize) {
                renderer.removeStyle(content, 'transition');
            } else {
                renderer.setStyle(content, 'transition', 'none', 1);
            }
        });
    }

    static flipCard(index: number): number[] {
        const indexSelected = this.isCardFlippedArrayComparasion.indexOf(index);

        if (indexSelected !== -1)
            this.isCardFlippedArrayComparasion.splice(indexSelected, 1);
        else this.isCardFlippedArrayComparasion.push(index);

        this.isCardFlippedCheckInCards = this.isCardFlippedArrayComparasion;

        return [...this.isCardFlippedCheckInCards];
    }

    static calculateAndSetFlipVariables(
        cardsContainer: ElementRef,
        renderer: Renderer2,
        isResize: boolean = false
    ): void {
        if (!cardsContainer) {
            return;
        }

        const flipCards =
            cardsContainer.nativeElement.querySelectorAll('.flip-card');

        if (isResize) {
            this.toggleTransition(false, cardsContainer, renderer);
        }

        flipCards.forEach((card: HTMLElement) => {
            const cardWidth = card.offsetWidth;
            const cardHeight = card.offsetHeight;

            if (cardWidth && cardHeight) {
                const diagonal = Math.sqrt(
                    cardWidth * cardWidth + cardHeight * cardHeight
                );

                const flipWidth = cardWidth / diagonal;
                const flipHeight = cardHeight / diagonal;

                const flipCardContent = card.querySelector(
                    '.flip-card-content'
                ) as HTMLElement;

                if (flipCardContent) {
                    renderer.setStyle(
                        flipCardContent,
                        '--flip-width',
                        `${-flipWidth}`,
                        2
                    );
                    renderer.setStyle(
                        flipCardContent,
                        '--flip-height',
                        `${-flipHeight}`,
                        2
                    );
                }
            }
        });

        if (isResize) {
            this.toggleTransition(isResize, cardsContainer, renderer);
        }
    }
}