@let isItemsFormArrayInvalid = itemsFormArray.invalid;

@let itemsLength = itemsFormArray.length;

@let hasNoDataImage = _itemsConfig.noDataImage && !itemsLength;
@let hasNoCardVariation = _itemsConfig.hasNoCardVariation;
@let hasPlusIcon = !hasNoCardVariation && !_itemsConfig.isDisabled;
@let hasDivider = !hasNoCardVariation && !_itemsConfig.isDividerHidden;

@let isCardOpen = hasNoDataImage || !!itemsLength;
@let isDisabledCard = hasNoCardVariation || (!hasNoDataImage && !itemsLength);
@let isAlwaysOpen = _itemsConfig.isAlwaysOpen || false;

@let cardName = _itemsConfig.cardName || eStringPlaceholder.EMPTY;
@let cardSubText = _itemsConfig.cardSubText || null;
@let counter = hasNoCardVariation ? -1 : itemsLength;

<app-ca-custom-card
    [cardName]="cardName"
    [cardSubText]="cardSubText"
    [counter]="counter"
    [hasArrow]="false"
    [hasPlusIcon]="hasPlusIcon"
    [hasDivider]="hasDivider"
    [isCardOpen]="isCardOpen"
    [isPlusIconDisabled]="isItemsFormArrayInvalid"
    [isDisabledCard]="isDisabledCard"
    [isAlwaysOpen]="isAlwaysOpen"
    [plusIconTooltip]="eGeneralActions.ADD_NEW"
    [isHeaderHidden]="hasNoCardVariation"
    [customDividerClass]="'divider--dark divider--small'"
    [animationMarginParams]="{
        marginTop: '0px',
        marginBottom: hasNoCardVariation ? '0px' : '8px',
    }"
    (onActionEvent)="onItemsRowAdd()"
>
    <div class="d-flex flex-column modal-items-container">
        <!-- No Data -->

        @if (hasNoDataImage) {
            <!-- No Data Img -->

            <ng-container *ngTemplateOutlet="noDataImg"></ng-container>
        } @else {
            <!-- Data -->

            @let gridTemplateColumns =
                {
                    'grid-template-columns':
                        _itemsConfig.gridTemplateColumnValues,
                };

            <!-- Header and List -->

            <ng-container
                *ngTemplateOutlet="
                    mainContent;
                    context: {
                        gridTemplateColumns,
                    }
                "
            ></ng-container>

            <!-- Total Cost -->

            <ng-container
                *ngTemplateOutlet="modalItemsTotalCost"
            ></ng-container>
        }
    </div>
</app-ca-custom-card>

<!-- Templates -->

<!-- Main Content Template -->

<ng-template #mainContent let-gridTemplateColumns="gridTemplateColumns">
    @if (itemsLength) {
        @if (_itemsConfig.stickyGridTemplateColumnValues) {
            <!-- Sticky Layout -->

            <div
                class="d-flex align-items-center position-relative"
                scrollShadowBorder
                [hasNoCardVariation]="hasNoCardVariation ?? false"
            >
                @let stickyGridTemplateColumns =
                    {
                        'grid-template-columns':
                            _itemsConfig.stickyGridTemplateColumnValues,
                    };

                <!-- Sticky Section -->

                <div
                    class="d-flex flex-column w-fit-content"
                    [class.p-b-10]="!hasNoCardVariation"
                >
                    <!-- Sticky Section Header -->

                    @let stickySectionHeaderContext =
                        {
                            gridTemplateColumns: stickyGridTemplateColumns,
                            headerItems:
                                _itemsConfig.headerItems | slice: 0 : 2,
                            requiredIndex:
                                _itemsConfig.stickyHeaderItemsRequiredIndex,
                            isStickySection: true,
                        };

                    <ng-container
                        *ngTemplateOutlet="
                            headerSection;
                            context: stickySectionHeaderContext
                        "
                    ></ng-container>

                    <!-- Sticky Section List -->

                    @let stickySectionListContext =
                        {
                            gridTemplateColumns: stickyGridTemplateColumns,
                            templateRef: stickyItemsRowTemplate,
                        };

                    <ng-container
                        *ngTemplateOutlet="
                            listSection;
                            context: stickySectionListContext
                        "
                    ></ng-container>
                </div>

                <!-- Scrollable Section -->

                <div
                    #scrollableColumns
                    class="d-flex flex-column overflow-x-auto position-relative modal-items-scrollable-columns"
                    [class.native-scrollbar-hidden]="hasNoCardVariation"
                >
                    <!-- Scrollable Section Header -->

                    @let scrollableSectionHeaderContext =
                        {
                            gridTemplateColumns,
                            headerItems: _itemsConfig.headerItems | slice: 2,
                            requiredIndex:
                                _itemsConfig.headerItemsRequiredIndex,
                            alignRightIndex:
                                _itemsConfig.headerItemsAlignRightIndex,
                            alignLeftIndex:
                                _itemsConfig.headerItemsAlignLeftIndex,
                            justifyCenterIndex:
                                _itemsConfig.headerItemsJustifyCenterIndex,
                            isStickySection: false,
                        };

                    <ng-container
                        *ngTemplateOutlet="
                            headerSection;
                            context: scrollableSectionHeaderContext
                        "
                    ></ng-container>

                    <!-- Scrollable Section List -->

                    @let scrollableSectionListContext =
                        {
                            gridTemplateColumns,
                            templateRef: itemsRowTemplate,
                        };

                    <ng-container
                        *ngTemplateOutlet="
                            listSection;
                            context: scrollableSectionListContext
                        "
                    ></ng-container>
                </div>
            </div>

            @if (hasNoCardVariation) {
                <ng-container
                    *ngTemplateOutlet="
                        showMore;
                        context: { stickyGridTemplateColumns }
                    "
                ></ng-container>
            }
        } @else {
            <!-- Standard Layout -->

            <!-- Standard Layout Header -->

            @let standardLayoutHeaderContext =
                {
                    gridTemplateColumns,
                    headerItems: _itemsConfig.headerItems,
                    requiredIndex: _itemsConfig.headerItemsRequiredIndex,
                    alignRightIndex: _itemsConfig.headerItemsAlignRightIndex,
                    alignLeftIndex: _itemsConfig.headerItemsAlignLeftIndex,
                    justifyCenterIndex:
                        _itemsConfig.headerItemsJustifyCenterIndex,
                };

            <ng-container
                *ngTemplateOutlet="
                    headerSection;
                    context: standardLayoutHeaderContext
                "
            ></ng-container>

            @let adjustedGridTemplateColumns =
                _itemsConfig.singleListItemGridTemplateColumnValues
                    ? {
                          'grid-template-columns':
                              _itemsConfig.singleListItemGridTemplateColumnValues,
                      }
                    : gridTemplateColumns;

            <!-- Standard Layout List -->

            @let standardLayoutListContext =
                {
                    gridTemplateColumns: adjustedGridTemplateColumns,
                    templateRef: itemsRowTemplate,
                };

            <ng-container
                *ngTemplateOutlet="
                    listSection;
                    context: standardLayoutListContext
                "
            ></ng-container>
        }
    }
</ng-template>

<!-- Header Section -->

<ng-template
    #headerSection
    let-gridTemplateColumns="gridTemplateColumns"
    let-headerItems="headerItems"
    let-requiredIndex="requiredIndex"
    let-alignRightIndex="alignRightIndex"
    let-alignLeftIndex="alignLeftIndex"
    let-justifyCenterIndex="justifyCenterIndex"
    let-isStickySection="isStickySection"
>
    <div
        class="d-grid gap-px-4 align-items-center m-b-4 m-t-8"
        [ngStyle]="gridTemplateColumns"
    >
        @for (
            headerItem of headerItems;
            let headerItemFirst = $first;
            let headerItemLast = $last;
            let headerIndex = $index;
            track headerItem
        ) {
            @let isRequiredItem = requiredIndex?.includes(headerIndex);

            @let isAlignRightItem = alignRightIndex?.includes(headerIndex);
            @let isAlignLeftItem = alignLeftIndex?.includes(headerIndex);
            @let isJustifyCenterItem =
                justifyCenterIndex?.includes(headerIndex);

            @let headerItemClass =
                {
                    headerItemFirst,
                    headerItemLast,
                    isJustifyCenterItem,
                    isAlignLeftItem,
                    isStickySection,
                } | modalItemsHeaderClass;

            <div class="d-flex align-items-center" [ngClass]="headerItemClass">
                <p
                    class="ca-font-bold text-size-11 text-color-muted"
                    [ngClass]="{ 'order-2': isAlignRightItem }"
                >
                    @if (headerItem) {
                        {{ headerItem }}
                    } @else {
                        @let hasSingleItemsRow = itemsLength <= 1;

                        @if (hasSingleItemsRow) {
                            #
                        } @else {
                            <div
                                class="c-pointer"
                                (click)="onItemsRowReorder()"
                            >
                                <svg-icon
                                    class="svg-size-12 svg-fill-muted"
                                    [src]="sharedSvgRoutes.SORT_ARROWS_ICON"
                                ></svg-icon>
                            </div>
                        }
                    }
                </p>

                @if (isRequiredItem) {
                    <span
                        class="ca-font-semi-bold text-size-11 text-color-red-11"
                        [class]="isAlignRightItem ? 'm-r-2' : 'm-l-2'"
                    >
                        *
                    </span>
                }
            </div>
        }
    </div>
</ng-template>

<!-- List Section -->

<ng-template
    #listSection
    let-gridTemplateColumns="gridTemplateColumns"
    let-templateRef="templateRef"
>
    <div class="d-flex flex-column">
        @for (
            group of itemsFormArray.controls;
            track group;
            let index = $index
        ) {
            <div
                class="br-2 h-26 m-b-4"
                [ngClass]="{
                    'background-hover-light-grey-5': _itemsConfig.isDisabled,
                    'd-none':
                        index >= displayedListLength && hasNoCardVariation,
                }"
            >
                @let groupClass =
                    {
                        'background-white':
                            group.valid &&
                            !_itemsConfig.isDisabled &&
                            hoverIndex !== index,
                        'background-light-grey-5':
                            !group.valid && hoverIndex !== index,
                        'background-hover-bw2': !_itemsConfig.isDisabled,
                        'background-bw2':
                            !_itemsConfig.isDisabled && hoverIndex === index,
                        'pe-none user-select-none': _itemsConfig.isDisabled,
                    };

                <div
                    class="d-grid gap-px-4 align-items-center br-2"
                    [ngClass]="groupClass"
                    [ngStyle]="gridTemplateColumns"
                    (mouseenter)="onItemsRowHover(index)"
                    (mouseleave)="onItemsRowHover(-1)"
                >
                    <ng-container
                        *ngTemplateOutlet="
                            templateRef;
                            context: {
                                $implicit: group,
                                index,
                                hoverIndex,
                                parentFormArrayIndex,
                            }
                        "
                    ></ng-container>
                </div>
            </div>
        }
    </div>
</ng-template>

<!-- Total Cost Template -->

<ng-template #modalItemsTotalCost>
    @if (itemsTotalValue) {
        <div
            class="d-flex align-items-center justify-content-between m-t-4 p-x-6"
        >
            <p class="text-size-14 text-color-muted ca-font-semi-bold">
                Total Cost
            </p>

            <p class="text-size-14 text-color-black ca-font-bold">
                {{ itemsTotalValue }}
            </p>
        </div>
    }
</ng-template>

<!-- No Data Template -->

<ng-template #noDataImg>
    @let noDataImgRoute =
        sharedSvgRoutes.COMMON_FOLDER_ROUTE + _itemsConfig.noDataImage;

    @let noDataImgDimensions =
        {
            width: _itemsConfig.noDataImageDimensions?.width,
            height: _itemsConfig.noDataImageDimensions?.height,
        };

    <img
        class="prevent-text-selection"
        [src]="noDataImgRoute"
        [ngStyle]="noDataImgDimensions"
    />
</ng-template>

<!-- Show More Template -->

<ng-template
    #showMore
    let-stickyGridTemplateColumns="stickyGridTemplateColumns"
>
    <div class="position-sticky bottom-0 background-white p-y-12">
        <div class="d-flex position-relative d-flex align-items-center">
            <div class="d-grid" [ngStyle]="stickyGridTemplateColumns">
                <app-ca-show-more
                    class="position-absolute top--7 left-0 right-0"
                    [displayedDataCount]="displayedListLength"
                    [totalDataCount]="listLength"
                    (onShowMore)="onShowMore()"
                ></app-ca-show-more>
            </div>
            <app-ca-custom-horizontal-scrollbar
                [scrollableElement]="scrollableElement"
                [trackRightOffsetPx]="scrollbarTrackRightOffsetPx"
            ></app-ca-custom-horizontal-scrollbar>
        </div>
    </div>
</ng-template>