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

export class TableCardSkeletonHelper {
    static scrollToBottom(
        skeleton: ElementRef,
        isBannerVisible: boolean,
        cardsContainer: ElementRef
    ): void {
        const skeletonEl = skeleton.nativeElement as HTMLElement;
        const container = cardsContainer.nativeElement as HTMLElement;
        const cards = container.querySelectorAll('.flip-card');

        let cardHeight: number = 234; // Fallback height
        if (cards.length) {
            const firstCard = cards[0] as HTMLElement;
            cardHeight = firstCard.offsetHeight;
        }

        let sameRow = false;
        if (cards.length > 0) {
            const lastCard = cards[cards.length - 1] as HTMLElement;
            sameRow =
                Math.abs(
                    skeletonEl.getBoundingClientRect().top -
                        lastCard.getBoundingClientRect().top
                ) === 0;
        }
        cardHeight = sameRow ? 0 : cardHeight;
        const topMarginOffset =
            sameRow && isBannerVisible
                ? 42
                : sameRow
                  ? 12
                  : isBannerVisible
                    ? 46
                    : 16;

        let scrollable = container;
        while (
            scrollable &&
            !(
                scrollable.scrollHeight > scrollable.clientHeight &&
                ['auto', 'scroll'].includes(
                    getComputedStyle(scrollable).overflowY
                )
            )
        ) {
            scrollable = scrollable.parentElement!;
        }

        if (!scrollable) return;

        const { top: skeletonTop } = skeletonEl.getBoundingClientRect();
        const { top: scrollableTop } = scrollable.getBoundingClientRect();
        const scrollTop =
            skeletonTop -
            scrollableTop +
            scrollable.scrollTop -
            (cardHeight + topMarginOffset);

        scrollable.scrollTo({
            top: Math.max(0, scrollTop),
            behavior: 'smooth',
        });
    }

    static adjustPlaceholderHeights(
        renderer: Renderer2,
        skeletons: QueryList<ElementRef>,
        cardsContainer: ElementRef
    ): void {
        if (!cardsContainer || !skeletons?.length) {
            return;
        }

        const firstCard = cardsContainer.nativeElement.querySelector(
            '.flip-card'
        ) as HTMLElement | null;

        if (firstCard) {
            const cardHeight = firstCard.offsetHeight;

            skeletons.forEach((skeleton) => {
                if (skeleton?.nativeElement) {
                    renderer.setStyle(
                        skeleton.nativeElement,
                        'height',
                        cardHeight + 'px'
                    );
                }
            });
        }
    }
}