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

// modules
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HttpClientModule } from '@angular/common/http';
import { AngularSvgIconModule } from 'angular-svg-icon';

// pipes
import { CaSvgPipe } from '../../pipes/ca-svg.pipe';

// models
import { CaSelectableColumnTableModel } from './models/ca-selectable-column-table.model';

// components
import { CaAutoclosePopoverComponent } from '../ca-autoclose-popover/ca-autoclose-popover.component';
import { CaAppTooltipV2Component } from '../ca-app-tooltip-v2/ca-app-tooltip-v2.component';

@Component({
    imports: [
        // modules
        CommonModule,
        HttpClientModule,
        AngularSvgIconModule,
        NgbModule,
        // components
        CaAutoclosePopoverComponent,
        CaAppTooltipV2Component,
        // pipes
        CaSvgPipe,
    ],
    encapsulation: ViewEncapsulation.None,
    selector: 'app-ca-selectable-column-table',
    templateUrl: './ca-selectable-column-table.component.html',
    styleUrls: ['./ca-selectable-column-table.component.scss']
})
export class CaSelectableColumnTableComponent {
    @Input() columns: CaSelectableColumnTableModel[] = [];
    @Output() columnsToShow = new EventEmitter<
        CaSelectableColumnTableModel[]
    >();

    public isPopoverActive: boolean = false;

    public onPopoverShown() {
        this.isPopoverActive = true;
    }

    public onPopoverClose() {
        this.isPopoverActive = false;
    }

    // Toggle column visibility
    public toggleColumn(column: CaSelectableColumnTableModel) {
        column.selected = !column.selected;
        this.columnsToShow.emit(this.columns);
    }

    public resetColumns() {
        this.columns.forEach((column) => {
            if (!column.disabled) column.selected = false;
        });

        this.columnsToShow.emit(this.columns);
    }
}