import { CommonModule } from '@angular/common';
import {
    ChangeDetectorRef,
    Component,
    EventEmitter,
    Input,
    Output,
    TemplateRef,
    OnInit,
    ViewChild,
    ElementRef,
} from '@angular/core';
import { UntypedFormArray } from '@angular/forms';

// components
import { CaCustomCardComponent } from '../ca-custom-card/ca-custom-card.component';
import { CaCustomHorizontalScrollbarComponent } from '../ca-custom-horizontal-scrollbar/ca-custom-horizontal-scrollbar.component';
import { SvgIconComponent } from 'angular-svg-icon';
import { CaShowMoreComponent } from '../ca-show-more/ca-show-more.component';

// enums
import { eGeneralActions, eStringPlaceholder } from '../../enums';
import { eModalItems } from './enums';

// pipes
import { ModalItemsHeaderClassPipe } from './pipes';

// directives
import { ScrollShadowBorderDirective } from './directives';

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

// interfaces
import { IModalItemsConfig, IItemsRowTemplate } from './interfaces';

@Component({
    selector: 'app-ca-modal-items',
    templateUrl: './ca-modal-items.component.html',
    styleUrl: './ca-modal-items.component.scss',
    imports: [
        CommonModule,

        // components
        CaCustomCardComponent,
        CaCustomHorizontalScrollbarComponent,
        CaShowMoreComponent,
        SvgIconComponent,

        // pipes
        ModalItemsHeaderClassPipe,

        // directives
        ScrollShadowBorderDirective,
    ],
})
export class CaModalItemsComponent implements OnInit {
    @ViewChild('scrollableColumns')
    scrollableColumnsRef?: ElementRef<HTMLElement>;

    @Input() set itemsConfig(value: IModalItemsConfig) {
        this._itemsConfig = value;
    }

    @Input() itemsRowTemplate!: TemplateRef<IItemsRowTemplate>;
    @Input() stickyItemsRowTemplate!: TemplateRef<IItemsRowTemplate>;

    @Input() itemsFormArray!: UntypedFormArray;
    @Input() itemsTotalValue!: number;

    @Input() parentFormArrayIndex?: number | null = null;

    @Output() onItemsAction: EventEmitter<string> = new EventEmitter();

    public _itemsConfig!: IModalItemsConfig;

    // import modal: track shortened from right (for custom scrollbar)
    public scrollbarTrackRightOffsetPx: number = 0;

    // helper indexes
    public hoverIndex: number = -1;

    // svg routes
    public sharedSvgRoutes = SharedSvgRoutes;

    // enums
    public eGeneralActions = eGeneralActions;
    public eStringPlaceholder = eStringPlaceholder;

    private DEFAULT_LIST_LENGTH: number = 25;
    public listLength: number = 0;
    public displayedListLength: number = 0;

    public scrollableElement: HTMLElement | null = null;

    constructor() {}

    ngOnInit(): void {
        this.initializeListLength();
    }

    private initializeListLength(): void {
        if (!this._itemsConfig.hasNoCardVariation) return;

        requestAnimationFrame(() => {
            this.scrollableElement =
                this.scrollableColumnsRef?.nativeElement ?? null;
        });

        this.listLength = this.itemsFormArray.length;
        this.displayedListLength = Math.min(
            this.listLength,
            this.DEFAULT_LIST_LENGTH
        );

        this.scrollbarTrackRightOffsetPx =
            this.listLength === this.displayedListLength ? 0 : 85;
    }

    public onShowMore(): void {
        this.displayedListLength += this.DEFAULT_LIST_LENGTH;
        if (this.displayedListLength >= this.listLength) {
            this.displayedListLength = this.listLength;
            this.scrollbarTrackRightOffsetPx = 0;
        }
    }

    public onItemsRowAdd(): void {
        this.onItemsAction.emit(eModalItems.ADD_ITEM);
    }

    public onItemsRowHover(index: number): void {
        this.hoverIndex = index;
    }

    public onItemsRowReorder(): void {}
}