import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule, MatCardTitle } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatFormFieldModule } from '@angular/material/form-field';
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 { RouterLink, RouterOutlet } from '@angular/router';
import { IService } from 'src/app/_interfaces/servives/service';
import { ServiceService } from 'src/app/_services/service/service.service';
import { CarouselComponent } from 'src/app/shared/carousel/carousel.component';

@Component({
  selector: 'bgui-view-service',
  standalone: true,
  imports: [
    RouterLink,
    RouterOutlet,
    CommonModule,
    MatPaginator,
    MatTableModule,
    MatFormFieldModule,
    MatInputModule,
    CarouselComponent,
    MatCardModule,
    MatCardTitle,
    ReactiveFormsModule,
    MatButtonModule,
    MatIconModule,
    MatCheckboxModule,
    MatPaginatorModule,
    FormsModule,
    MatMenuModule,
  ],
  templateUrl: './view-service.component.html',
  styleUrl: './view-service.component.scss',
})
export class ViewServiceComponent {
  services: IService[] = [];

  displayedColumns: string[] = [
    // 'service_id',
    'nom_service',
    'description',
    'marchand',
    'actions',
  ];

  showForm = false;
  hidden = false;
  dataReadonly = true;
  dataSource = new MatTableDataSource<IService>();

  @ViewChild(MatPaginator) paginator!: MatPaginator;

  constructor(private service: ServiceService) {}

  ngOnInit(): void {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    this.service.getServices().subscribe((data: any) => {
      this.services = data.results;
      console.log('services=>', this.services);
      this.dataSource.data = this.services;
    });
  }

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

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  updateService() {
    this.showForm = true;
    this.hidden = false;
    this.dataReadonly = false;
  }

  viewService() {
    this.showForm = true;
    this.hidden = true;
    this.dataReadonly;
  }
}