import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';

// Modules
import { AngularSvgIconModule } from 'angular-svg-icon';
import { NgbModule, NgbPopover, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';

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

// Ennums
import { eColor, eGeneralActions, ePosition, eSharedString } from '../../enums';

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

// Interface
import { ITableColumn } from '../../interfaces/table/table-column.interface';

@Component({
    selector: 'app-ca-sorting-card-dropdown',
    imports: [
        // Modules
        CommonModule,
        AngularSvgIconModule,
        NgbTooltip,
        NgbModule,
        // Components
        CaAppTooltipV2Component,
    ],
    templateUrl: './ca-sorting-card-dropdown.component.html',
    styleUrl: './ca-sorting-card-dropdown.component.scss'
})
export class CaSortingCardDropdownComponent {
    @Input() options!: ITableColumn[];
	@Input() isDisabled!: boolean;

    @Output() onSortChange = new EventEmitter<ITableColumn | null>();
    @Output() onSelectItem = new EventEmitter<ITableColumn | null>();

    public dropdownPopover: NgbPopover | null = null;
    public selectedItem!: ITableColumn | null;
    public hoveredItem!: ITableColumn | null;

    public sharedSvgRoutes = SharedSvgRoutes;
    public eSharedString = eSharedString;
    public ePosition = ePosition;
    public eColor = eColor;
    public eGeneralActions = eGeneralActions;

    public sortDirection = eSharedString.DSC;

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

    public onSortClick(event: MouseEvent): void {
        event.preventDefault();
        event.stopPropagation();

        this.sortDirection =
            this.sortDirection === eSharedString.DSC
                ? eSharedString.ASC
                : eSharedString.DSC;

        this.onSortChange.emit(this.selectedItem);
    }

    public handleDropdownOpenCloseClick(dropdownPopover: NgbPopover): void {
        if(this.isDisabled) {
			return;
		}
		
		if (dropdownPopover.isOpen()) {
            dropdownPopover.close();

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

            this.dropdownPopover = dropdownPopover;

            this.dropdownPopover.open();
        }
    }

    public onSelectItemClick(item: ITableColumn): void {
        this.dropdownPopover?.close();
        if (this.selectedItem?.key === item.key) {
            this.onSelectItem.emit({
				...this.selectedItem,
				removeSort: true
			});
            this.selectedItem = null;
        } else {
            this.selectedItem = item;
			this.onSelectItem.emit(this.selectedItem);
        }
        this.hoveredItem = null;
    }
}