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

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

// Interfaces
import { IIconDropdownConfig, IIconDropdownItem } from './interfaces';

// Enums
import { eStringPlaceholder } from '../../enums';

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

@Component({
    selector: 'app-ca-icon-dropdown',
    imports: [
        CommonModule,
        AngularSvgIconModule,
        NgbPopover,
        NgbTooltip,
        CaAppTooltipV2Component,
    ],
    templateUrl: './ca-icon-dropdown.component.html',
    styleUrl: './ca-icon-dropdown.component.scss'
})
export class CaIconDropdownComponent {
    @ViewChild('popover') popover!: NgbPopover;

    @Input() iconDropdownConfig!: IIconDropdownConfig;

    @Output() selectedItem = new EventEmitter();

    public isHovered: boolean = false;
    public iconDropdownSvgRoutes = IconDropdownSvgRoutes;

    /**
     * Gets the icon color based on the dropdown state.
     *
     * Logic:
     * - If the dropdown is open, returns `iconActiveColor`, regardless of hover state.
     * - If hovered (and dropdown is closed), returns `iconHoverColor`.
     * - Otherwise, returns `iconColor`.
     *
     * @returns {string} The computed icon color as a CSS string.
     */
    public get iconColor(): string {
        if (this.popover && this.popover.isOpen())
            return (
                this.iconDropdownConfig?.iconActiveColor ??
                eStringPlaceholder.EMPTY
            );

        return this.isHovered
            ? (this.iconDropdownConfig?.iconHoverColor ??
                  eStringPlaceholder.EMPTY)
            : (this.iconDropdownConfig?.iconColor ?? eStringPlaceholder.EMPTY);
    }

    /**
     * Gets the background color based on the dropdown state.
     *
     * Logic:
     * - If the dropdown is open, returns `iconActiveBackgroundColor`.
     * - If hovered, returns `iconHoverBackgroundColor`.
     * - Otherwise, returns `iconBackgroundColor`.
     *
     * @returns {string} The computed background color as a CSS string.
     */
    public get backgroundColor(): string {
        if (this.popover && this.popover.isOpen()) {
            return (
                this.iconDropdownConfig?.iconActiveBackgroundColor ??
                eStringPlaceholder.EMPTY
            );
        }
        return this.isHovered
            ? (this.iconDropdownConfig?.iconHoverBackgroundColor ??
                  eStringPlaceholder.EMPTY)
            : (this.iconDropdownConfig?.iconBackgroundColor ??
                  eStringPlaceholder.EMPTY);
    }

    /**
     * Selects an item from the dropdown, marks it as selected, and closes the dropdown.
     *
     * @param {IIconDropdownItem} item - The dropdown item that was selected.
     * @param {NgbPopover} popover - The popover instance to close after selection.
     * @returns {void}
     */
    public selectItem(item: IIconDropdownItem, popover: NgbPopover): void {
        this.iconDropdownConfig.dropdownItems.forEach(
            (item) => (item.isSelected = false)
        );
        item.isSelected = true;
        this.selectedItem.emit(item.value);
        popover.close();
    }

    /**
     * Updates the hover state of the icon.
     *
     * @param {boolean} isHovered - `true` if the icon is hovered, `false` otherwise.
     * @returns {void}
     */
    public setHoveredIconState(isHovered: boolean): void {
        this.isHovered = isHovered;
    }
}