import {
  Component,
  EventEmitter,
  Input,
  OnDestroy,
  Output,
} from '@angular/core';
import { TableColumn } from 'src/app/modules/shared/components/table/table.model';
import { GuiService } from 'src/app/service/gui.service';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-column-selector',
  templateUrl: './column-selector.component.html',
  styleUrls: ['./column-selector.component.scss'],
})
export class ColumnSelectorComponent<T> implements OnDestroy {
  @Input() columns: TableColumn<T>[] = [];
  @Output() selectChange = new EventEmitter<void>();

  protected theme = '';
  private unsubscribe$ = new EventEmitter<void>();

  constructor(private guiService: GuiService) {
    this.guiService.theme$
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe(theme => {
        this.theme = theme;
      });
  }

  ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}
