import {
    ChangeDetectionStrategy,
    Component,
    EventEmitter,
    Input,
    Output,
    ViewEncapsulation,
    ChangeDetectorRef,
    NgZone,
} from '@angular/core';

// modules
import { CommonModule } from '@angular/common';
import { NgbModule, NgbPopover } from '@ng-bootstrap/ng-bootstrap';
import { Options } from '@popperjs/core/lib/popper';

// icon
import { AngularSvgIconModule } from 'angular-svg-icon';

// animation
import { borderShowAnimation, showAnimation } from '../../animations/animation';

// model
import {
    DropDownData,
    IDropDownActions,
} from '../ca-details-dropdown/models/detail-dropdown.model';

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

@Component({
    selector: 'app-ca-details-dropdown',
    templateUrl: './ca-details-dropdown.component.html',
    styleUrls: ['./ca-details-dropdown.component.scss'],
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [
        // modules
        CommonModule,
        AngularSvgIconModule,
        NgbModule,
        // pipes
        CaSvgPipe,
    ],
    animations: [showAnimation, borderShowAnimation]
})
export class CaDetailsDropdownComponent {
    @Input() options!: DropDownData[];
    @Input() id!: number;
    @Input() customClassDropDown!: string;
    @Input() hasVericalDots!: boolean;
    @Input() data!: DropDownData;
    @Input() leftIcon: boolean = true;
    @Input() public placement: string = 'bottom-right';
    @Output() dropDownActions: EventEmitter<IDropDownActions> =
        new EventEmitter();
    @Output() openModalAction: EventEmitter<string> = new EventEmitter();

    public tooltip!: NgbPopover;
    public dropDownActive: number = -1;
    public subtypeHovered: boolean = false;

    constructor(
        private chnd: ChangeDetectorRef,
        private ngZone: NgZone
    ) {}

    public toggleDropdown(tooltip: NgbPopover): void {
        this.ngZone.run(() => {
            this.tooltip = tooltip;
            if (tooltip.isOpen()) {
                tooltip.close();
            } else {
                if (this.options) {
                    tooltip.open({ data: [...this.options] });
                }
            }

            this.dropDownActive = tooltip.isOpen() ? this.id : -1;
            this.chnd.detectChanges();
        });
    }

    /**Function retrun id */
    public identity(index: number): number {
        return index;
    }

    public onAction(action: DropDownData, event?: Event): void | boolean {
        event!.stopPropagation();
        event!.preventDefault();

        if (action?.disabled) {
            return false;
        }

        this.dropDownActions.emit({
            id: this.id,
            data: this.data,
            type: action.name,
        });

        this.tooltip.close();
    }

    public dropdownClosed(): void {
        this.options.map((item: DropDownData) => {
            item['mutedStyle'] = false;
        });
    }

    public popperOptions = (options: Partial<Options>): Partial<Options> => {
        options.modifiers?.push({
            name: 'custom',
            enabled: true,
            phase: 'main',
            effect: ({ state, instance }) => {
                const observer = new ResizeObserver(() => instance.update());
                observer.observe(state.elements!.reference as any);
                return () => {
                    observer.disconnect();
                };
            },
        });
        return options;
    };

    ngOnDestroy() {
        this.tooltip?.close();
    }
}