import { CdkDragDrop, moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
import { Component, OnInit } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatTableModule } from '@angular/material/table';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import { BehaviorSubject } from 'rxjs';

import { Table } from '../../core/table';
import { ToasterService } from '../../core/toaster.service';
import { TableService } from '../table.service';

import { TableListDataSource } from './table-list-datasource';

@Component({
  selector: 'app-table-list',
  templateUrl: './table-list.component.html',
  styleUrls: ['./table-list.component.css'],
  imports: [DragDropModule, MatButtonModule, MatCardModule, MatIconModule, MatTableModule, RouterLink],
})
export class TableListComponent implements OnInit {
  // @ViewChild('table', { static: true }) table?: MatTable<Table>;
  data: BehaviorSubject<Table[]> = new BehaviorSubject<Table[]>([]);
  dataSource: TableListDataSource = new TableListDataSource(this.data);
  list: Table[] = [];
  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = ['name', 'seats', 'section', 'isActive'];

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private toaster: ToasterService,
    private ser: TableService,
  ) {
    this.data.subscribe((data: Table[]) => {
      this.list = data;
    });
  }

  ngOnInit() {
    this.route.data.subscribe((value) => {
      const data = value as { list: Table[] };
      this.data.next(data.list);
    });
    this.dataSource = new TableListDataSource(this.data);
  }

  updateSortOrder() {
    this.ser.updateSortOrder(this.list).subscribe({
      next: () => {
        this.toaster.show('Success', '');
      },
      error: (error) => {
        this.toaster.show('Error', error);
      },
    });
  }

  dropTable(event: CdkDragDrop<TableListDataSource>) {
    const prevIndex = this.list.indexOf(event.item.data);
    moveItemInArray(this.list, prevIndex, event.currentIndex);
    this.data.next(this.list);
  }
}