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

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

// Forms
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

// Models
import { SortColumn } from '../ca-sort-dropdown/models/sort-column.model';

// Types
import { FilterDropdownTypes, FilterSortingKey } from './types';

// Enums
import { SortDropdownEnum } from '../ca-sort-dropdown/enums';

// Interface
import {
    IFilterAction,
    IFilterDropdownConfiguration,
    IFilterDropdownList,
    ISortEmit,
} from './interface';

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

// Utils
import { CaFiltersSvgRoutes } from '../ca-filters/utils/svg-routes';

@Component({
    selector: 'app-ca-filter-dropdown',
    imports: [
        CommonModule,
        AngularSvgIconModule,
        NgbModule,
        FormsModule,
        ReactiveFormsModule,
        // Components
        SvgIconComponent,
        CaAppTooltipV2Component,
        CaSortDropdownComponent,
    ],
    templateUrl: './ca-filter-dropdown.component.html',
    styleUrl: './ca-filter-dropdown.component.scss',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class CaFilterDropdownComponent {
    // Inputs
    @Input() activeCount: number = 0;
    @Input() type!: FilterDropdownTypes;
    @Input() config!: IFilterDropdownConfiguration;
    @Input() bodyTemplate!: TemplateRef<any>;
    @Input() isFormChanged: boolean = false;
    @Input() appliedFiltersCount: number = 0;
    @Input() customTitle: string | false = false;
    @Input() customCancelButton: string | false = false;
    @Input() isDisabled!: boolean;
    @Input() svgCustomSizeClass: string = 'svg-size-16';

    // Outputs
    @Output() setFilter: EventEmitter<IFilterAction> = new EventEmitter();
    @Output() handleFiltersClear: EventEmitter<boolean> = new EventEmitter();
    @Output() resetFilterState: EventEmitter<boolean> = new EventEmitter();
    @Output() sorting: EventEmitter<ISortEmit> = new EventEmitter();

    // Public
    public selectedList: IFilterDropdownList[] = [];
    public unselectedList: IFilterDropdownList[] = [];
    public activeSortType!: SortColumn;
    public filterPopoverOpen: NgbPopover | null = null;
    public caFiltersSvgRoutes = CaFiltersSvgRoutes;
    public isClosingManually = false;

    public handleSortClick(event: {
        column: SortColumn;
        sortName: string;
        direction: string;
    }): void {
        this.activeSortType = event.column;
        this.sortLists(
            this.activeSortType?.sortName as FilterSortingKey,
            event.direction
        );
    }

    public openClosePopover(popover: NgbPopover): void {
        this.filterPopoverOpen = popover;
        if (!this.isDisabled)
            this.filterPopoverOpen.isOpen()
                ? this.filterPopoverOpen.close()
                : this.filterPopoverOpen.open();
    }

    public applyFilters(): void {
        this.setFilter.emit();
        this.isClosingManually = true;
        this.filterPopoverOpen?.close();
    }

    public onFilterClear(): void {
        this.handleFiltersClear.emit(true);

        if (this.customCancelButton) {
            return;
        }
        this.isClosingManually = true;
        this.filterPopoverOpen?.close();
    }

    public onClickOutside(): void {
        if (this.isClosingManually) {
            this.isClosingManually = false;
            return;
        }
        this.resetFilterState.emit(true);
    }

    private sortLists(sortKey: FilterSortingKey, direction: string): void {
        const directionMultiplier = direction === SortDropdownEnum.ASC ? 1 : -1;

        this.sorting.emit({
            sortKey,
            directionMultiplier,
        });
    }
}