import {
    ChangeDetectorRef,
    Component,
    ElementRef,
    EventEmitter,
    HostListener,
    Input,
    Output,
    TemplateRef,
    ViewChild,
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgbModule, NgbPopover, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
import { AngularSvgIconModule } from 'angular-svg-icon';

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

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

// Enums
import { eColor } from '../../enums/color.enum';
import { ePosition } from '../../enums';

// Config
import { CaDetailsTitleCardConfig } from './interfaces/ca-details-title-card-config.interface';

@Component({
    selector: 'app-ca-details-title-card',
    templateUrl: './ca-details-title-card.component.html',
    styleUrls: ['./ca-details-title-card.component.scss'],
    imports: [
        // Modules
        CommonModule,
        AngularSvgIconModule,
        NgbTooltip,
        NgbModule,
        // Components
        CaAppTooltipV2Component,
    ],
})
export class CaDetailsTitleCardComponent<T> {
    @ViewChild('dropdownPopover') public popoverRef!: NgbPopover;
    @ViewChild('titleCardTooltip') public titleCardTooltip!: NgbTooltip;
    @ViewChild('titleCard') public titleCard!: ElementRef;
    @ViewChild('inputSearch') public inputSearch!: ElementRef;

    @Input() dropdownTemplate!: TemplateRef<T>;
    @Input() titleTemplate!: TemplateRef<T>;
    @Input() set detailsTitleCardConfig(values: CaDetailsTitleCardConfig) {
        this._detailsTitleCardConfig = values;

        if (values.isSearchTooltipDisabled && this.titleCardTooltip?.isOpen())
            this.titleCardTooltip.close();
    }

    @Output() onNextAction: EventEmitter<void> = new EventEmitter<void>();
    @Output() onPreviousAction: EventEmitter<void> = new EventEmitter<void>();
    @Output() onSearchTextChange: EventEmitter<string | null> =
        new EventEmitter();

    public _detailsTitleCardConfig!: CaDetailsTitleCardConfig;
    public titleCardWidth: number = 0;

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

    public toggleInput!: boolean;
    public dropdownPopover: NgbPopover | null = null;

    public get isDropdownActive(): boolean | undefined {
        return this.dropdownPopover?.isOpen();
    }

    constructor(private cdr: ChangeDetectorRef) {}

    private refreshWidth(): void {
        if (!this.titleCard) return;

        const titleCard = this.titleCard?.nativeElement;

        this.titleCardWidth = titleCard.offsetWidth;
    }

    public onTitleClick(): void {
        this.onToggleInput();
        this.refreshWidth();
        
        this.cdr.detectChanges();
        this.handleDropdownOpenCloseClick(this.popoverRef);

        this.inputSearch.nativeElement.focus();
    }

    public onToggleInput(): void {
        this.toggleInput = !this.toggleInput;
    }

    public onPopoverClosed(): void {
        this.toggleInput = false;

        this.onSearchTextChange.emit(null);
    }

    public handleDropdownOpenCloseClick(dropdownPopover: NgbPopover): void {
        if (dropdownPopover.isOpen()) {
            dropdownPopover.close();

            this.dropdownPopover = null;
            this.onToggleInput();
        } else {
            this.dropdownPopover?.close();

            this.dropdownPopover = dropdownPopover;

            this.dropdownPopover.open();
        }
    }

    public preventPopoverClosing(event: MouseEvent): void {
        event.stopPropagation();
    }

    public onPrevious(): void {
        if (!this._detailsTitleCardConfig?.isPreviousButtonDisabled)
            this.onPreviousAction.emit();
    }

    public onNext(): void {
        if (!this._detailsTitleCardConfig?.isNextButtonDisabled)
            this.onNextAction.emit();
    }

    public onSearchText(event: Event): void {
        const value = (event.target as HTMLInputElement).value;
        this.onSearchTextChange.emit(value);
    }
}