import { AfterContentInit, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { TableColumn } from '../../../models/fss-table.model';
import { TableColumnSelectService } from '../../../services/table/table-column-select.service';


@Component({
  selector: 'fss-column-menu',
  templateUrl: './fss-column-menu.component.html',
  styleUrls: ['./fss-column-menu.component.scss'],
  providers: [TableColumnSelectService]
})
export class FssColumnMenuComponent implements OnInit, AfterContentInit {
  @Input() visibleColumnsMenu: TableColumn[]= [];
  @Input() displayedColumns: TableColumn[] = [];
  
  @Output() displayedColumnsChanged: EventEmitter<TableColumn[]> = new EventEmitter<TableColumn[]>();
  @Output() closeMenu: EventEmitter<void> = new EventEmitter<void>();

  selectedColumns: Object = Object.create(null);

  constructor(private tableColumnSelectService: TableColumnSelectService) { }

  ngAfterContentInit(): void {
    this.selectedColumns = this.tableColumnSelectService.getSelectedColumnsObject(this.displayedColumns, this.visibleColumnsMenu);
  }  

  ngOnInit(): void {
  }

  close() {
    this.closeMenu.emit();
  }

  toggleColumn(column: TableColumn, event: MatCheckboxChange) {
    this.displayedColumns = this.tableColumnSelectService.toggleColumn(this.displayedColumns, column, event);
    this.selectedColumns = this.tableColumnSelectService.getSelectedColumnsObject(this.displayedColumns, this.visibleColumnsMenu);
    this.displayedColumnsChanged.emit(this.displayedColumns);
  }
}