import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
import {
  MatCheckboxDefaultOptions,
  MAT_CHECKBOX_DEFAULT_OPTIONS
} from '@angular/material/checkbox';
import { DriveFile } from '../drive-file';

@Component({
  selector: 'app-file-list-view',
  templateUrl: './file-list-view.component.html',
  styleUrls: ['./file-list-view.component.scss'],
  providers: [
    {
      provide: MAT_CHECKBOX_DEFAULT_OPTIONS,
      useValue: { clickAction: 'noop' } as MatCheckboxDefaultOptions,
    },
  ],
})
export class FileListViewComponent implements AfterViewInit {
  @Input() file: DriveFile;
  @Input() selected: boolean = false;
  @Input() focus: boolean = false;
  @Input() isSelectingMode: boolean = false;

  @Output() readonly navigate: EventEmitter<DriveFile> = new EventEmitter();

  constructor(private el: ElementRef) {}

  public onNavigate() {
    this.navigate.emit();
  }

  ngAfterViewInit() {
    if (this.focus) {
      this.el.nativeElement.querySelectorAll('.file-name').forEach((el) => {
        el.scrollIntoView({
          // behavior: 'smooth',
          block: 'center',
        });
      });
    }
  }
}
