import { Component, ViewChild } from '@angular/core';
import { RouterLink } from '@angular/router';
import { MatTabsModule } from '@angular/material/tabs';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { CreateTpeComponent } from 'src/app/tpe/create-tpe/create-tpe.component';


export interface Element {
  classes: string;
  cycles: string;
  charges: string;
  date: string;
  actions: string;
}

const ELEMENT_DATA: Element[] = [
  {
    classes: 'Classe 1',
    cycles: 'Cycle 1',
    charges: 'Charge 1',
    date: '2023-01-01',
    actions: 'Action 1',
  },
  {
    classes: 'Classe 2',
    cycles: 'Cycle 2',
    charges: 'Charge 2',
    date: '2023-02-01',
    actions: 'Action 2',
  },
  {
    classes: 'Classe 3',
    cycles: 'Cycle 3',
    charges: 'Charge 3',
    date: '2023-03-01',
    actions: 'Action 3',
  },
  {
    classes: 'Classe 4',
    cycles: 'Cycle 4',
    charges: 'Charge 4',
    date: '2023-04-01',
    actions: 'Action 4',
  },
  {
    classes: 'Classe 5',
    cycles: 'Cycle 5',
    charges: 'Charge 5',
    date: '2023-05-01',
    actions: 'Action 5',
  },
  {
    classes: 'Classe 6',
    cycles: 'Cycle 6',
    charges: 'Charge 6',
    date: '2023-06-01',
    actions: 'Action 6',
  },
  {
    classes: 'Classe 7',
    cycles: 'Cycle 7',
    charges: 'Charge 7',
    date: '2023-07-01',
    actions: 'Action 7',
  },
  {
    classes: 'Classe 8',
    cycles: 'Cycle 8',
    charges: 'Charge 8',
    date: '2023-08-01',
    actions: 'Action 8',
  },
  {
    classes: 'Classe 9',
    cycles: 'Cycle 9',
    charges: 'Charge 9',
    date: '2023-09-01',
    actions: 'Action 9',
  },
  {
    classes: 'Classe 10',
    cycles: 'Cycle 10',
    charges: 'Charge 10',
    date: '2023-10-01',
    actions: 'Action 10',
  },
];



@Component({
  selector: 'bgui-preferences',
  standalone: true,
  imports: [
    RouterLink,
    MatTabsModule,
    MatCardModule,
    CommonModule,
    MatButtonModule,
    MatIconModule,
    MatTableModule,
    FormsModule,
    MatPaginatorModule,
    MatInputModule,
    MatMenuModule,
  ],
  templateUrl: './preferences.component.html',
  styleUrl: './preferences.component.scss',
})
export class PreferencesComponent {
  deleteItem(_t101: any) {
    throw new Error('Method not implemented.');
  }
  editItem(_t101: any) {
    throw new Error('Method not implemented.');
  }
  inviteCollaborator(_t101: any) {
    throw new Error('Method not implemented.');
  }
  setDefault(_t101: any) {
    throw new Error('Method not implemented.');
  }
  displayedColumns: string[] = [
    'classes',
    'cycles',
    'charges',
    'date',
    'actions',
  ];
  dataSource = new MatTableDataSource(ELEMENT_DATA);
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  element: any;
  dialog: any;
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }

  public openDialog() {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const dialogRef = this.dialog.open(CreateTpeComponent, {
      width: '800px',
      height: '1000px',
    });
  }
}