import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MatDialog } from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr';
import { CreateCommandGroupComponent } from './create-command-group/create-command-group.component';
import { DetailCommandGroupComponent } from './detail-command-group/detail-command-group.component';
import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
import { MatTableDataSource } from "@angular/material/table";
import { DatePipe } from "@angular/common";

@Component({
  selector: 'app-commands-groups',
  templateUrl: './commands-groups.component.html',
  styleUrls: ['./commands-groups.component.css']
})
export class CommandsGroupsComponent implements OnInit {
  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
  dataSource = new MatTableDataSource<any>();
  filters: { [key: string]: string | boolean } = {};
  length: number = 0;
  itemsPerPage: number = 20;
  page: number = 0;
  pageSizeOptions: number[] = [10, 20, 40, 100];
  datePipe: DatePipe = new DatePipe('es-ES');
  loading: boolean = false;
  columns = [
    {
      columnDef: 'id',
      header: 'ID',
      cell: (group: any) => `${group.id}`,
    },
    {
      columnDef: 'name',
      header: 'Nombre',
      cell: (group: any) => `${group.name}`
    },
    {
      columnDef: 'commands',
      header: 'Lista de comandos',
      cell: (group: any) => `${group.commands}`
    },
    {
      columnDef: 'createdAt',
      header: 'Fecha de creación',
      cell: (group: any) => `${this.datePipe.transform(group.createdAt, 'dd/MM/yyyy hh:mm:ss')}`,
    }
  ];
  displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
  private apiUrl = `${this.baseUrl}/command-groups`;

  constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService) {}

  ngOnInit(): void {
    this.search();
  }

  search(): void {
    this.loading = true;
    this.http.get<any>(`${this.apiUrl}?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
      (data) => {
        this.dataSource.data = data['hydra:member'];
        this.length = data['hydra:totalItems'];
        this.loading = false;
      },
      (error) => {
        console.error('Error fetching command groups', error);
        this.loading = false;
      }
    );
  }

  viewGroupDetails(group: any): void {
    this.dialog.open(DetailCommandGroupComponent, {
      width: '800px',
      data: group,
    }).afterClosed().subscribe(() => this.search());
  }

  openCreateCommandGroupModal(): void {
    this.dialog.open(CreateCommandGroupComponent, {
      width: '700px',
    }).afterClosed().subscribe(() => this.search());
  }

  editCommandGroup(group: any): void {
    this.dialog.open(CreateCommandGroupComponent, {
      width: '700px',
      data: { group },
    }).afterClosed().subscribe(() => this.search());
  }

  deleteCommandGroup(group: any): void {
    this.dialog.open(DeleteModalComponent, {
      width: '300px',
      data: { name: group.name },
    }).afterClosed().subscribe((result) => {
      if (result) {
        this.http.delete(`${this.apiUrl}/${group.uuid}`).subscribe({
          next: () => {
            this.toastService.success('Grupo de comandos eliminado con éxito');
            this.search();
          },
          error: (error) => {
            console.error('Error al eliminar el grupo de comandos:', error);
          }
        });
      }
    });
  }

  onPageChange(event: any): void {
    this.page = event.pageIndex;
    this.itemsPerPage = event.pageSize;
    this.length = event.length;
    this.search();
  }
}