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

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

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

// Models
import { SortColumn } from './models';

// Enums
import { SortDropdownEnum } from './enums';
import { eColor, eStringPlaceholder } from '../../enums';

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

// Types
import { sortDirectionType } from './types';

// Interfaces
import { ISortDropdownAction } from './interfaces';

@Component({
    selector: 'app-ca-sort-dropdown',
    templateUrl: './ca-sort-dropdown.component.html',
    styleUrls: ['./ca-sort-dropdown.component.scss'],
    imports: [
        // Modules
        AngularSvgIconModule,
        NgbPopoverModule,
        NgbTooltipModule,
        CommonModule,
        // Components
        CaAppTooltipV2Component,
    ],
})
export class CaSortDropdownComponent implements OnDestroy {
    @Input() set sortColumns(values: SortColumn[]) {
        this._sortColumns = values;

        if (!this.activeSortColumn) this.sortChangeEvent(this._sortColumns[0]);
    }
    @Input() activeSortColumn!: SortColumn;
    @Input() dropdownPosition: string = SortDropdownEnum.RIGHT_TOP;
    @Input() dropdownWidth: number = 167;
    @Input() isDarkVariation: boolean = false;
    @Input() isLargeVariation: boolean = false;
    @Input() customPopoverClass: string = eStringPlaceholder.EMPTY;
    @Output() onSortChange: EventEmitter<ISortDropdownAction> =
        new EventEmitter();
    @Output() isSortPopoverOpened: EventEmitter<boolean> = new EventEmitter();
    private destroy$ = new Subject<void>();

    public sortDropdownSvgRoutes = SortDropdownSvgRoutes;

    public sortDirection: SortDropdownEnum.ASC | SortDropdownEnum.DESC =
        SortDropdownEnum.DESC;

    public sortDirectionsRotate: sortDirectionType = {
        asc: SortDropdownEnum.DESC,
        desc: SortDropdownEnum.ASC,
    };

    public sortDropdownPopover: NgbPopover | null = null;

    public isDropdownOpen: boolean = false;

    public _sortColumns: SortColumn[] = [];

    public eStringPlaceholder = eStringPlaceholder;
    public eColor = eColor;

    public sortDirectionChange(): void {
        this.sortDirection = this.sortDirectionsRotate[this.sortDirection];

        this.sortChangeEvent();
    }

    public sortChangeEvent(column?: SortColumn): void {
        if (column) this.activeSortColumn = column;

        const directionSort = this.sortDirection
            ? this.activeSortColumn?.sortName +
              (this.sortDirection[0]?.toUpperCase() +
                  this.sortDirection?.substr(1).toLowerCase())
            : '';

        this.onSortChange.emit({
            column: this.activeSortColumn,
            sortName: directionSort,
            direction: this.sortDirection,
        });

        if (this.sortDropdownPopover?.isOpen())
            this.openClosePopover(this.sortDropdownPopover);
    }

    public emitPopoverState(): void {
        this.isSortPopoverOpened.emit(this.isDropdownOpen);
    }

    public onHide(): void {
        this.isDropdownOpen = false;
        this.emitPopoverState();
    }

    public openClosePopover(popover: NgbPopover): void {
        this.sortDropdownPopover = popover;

        this.sortDropdownPopover.isOpen()
            ? this.sortDropdownPopover.close()
            : this.sortDropdownPopover.open();

        this.isDropdownOpen = this.sortDropdownPopover.isOpen();
        this.emitPopoverState();
    }

    ngOnDestroy(): void {
        this.destroy$.next();
        this.destroy$.complete();
    }
}