import { CommonModule } from '@angular/common';
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  EventEmitter,
  Injector,
  Input,
  OnInit,
  Output,
  TemplateRef,
  ViewEncapsulation,
} from '@angular/core';
import { Observable } from 'rxjs';
import {
  CdkDrag,
  CdkDragDrop,
  CdkDragPreview,
  CdkDropList,
  CdkDropListGroup,
  moveItemInArray
} from '@angular/cdk/drag-drop';

import { ScrollingModule } from '@angular/cdk/scrolling';

// Pipes
import { CaMainTableHiddenRowsPipe } from './pipes/ca-main-table-hidden-rows/ca-main-table-hidden-rows.pipe';
// Models
import { ColumnConfig } from './models/main-table.model';

@Component({
  selector: 'app-ca-main-table',
  templateUrl: './ca-main-table.component.html',
  standalone: true,
  imports: [
    CdkDropListGroup,
    CdkDropList,
    CdkDrag,
    CdkDragPreview,
    CommonModule,
    ScrollingModule,
    CaMainTableHiddenRowsPipe,
  ],
  styleUrls: ['./ca-main-table.component.scss'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CaMainTableComponent<T = any> implements OnInit {
  public tableData: T = {} as T;
  public selectedRowIndex: number | null = null;

  // Outputs
  @Output() onPressEvent: EventEmitter<any> = new EventEmitter<any>();
  @Output() onReorder: EventEmitter<CdkDragDrop<any[] | null, any, any>> =
    new EventEmitter<CdkDragDrop<any[] | null, any, any>>();


  // Inputs
  @Input() truckTemplate!: TemplateRef<any>;
  @Input() reorderTemplate!: TemplateRef<any>;
  @Input() reorderTemplatePreview!: TemplateRef<any>;
  @Input() transparentTable: boolean = false;
  @Input() sortPredicate: (index: number, item: CdkDrag<number>) => boolean = (
    _: number,
    __: CdkDrag<number>
  ) => {
    return true;
  };

  // Inputs
  @Input() hideFieldsToHide: boolean = false;
  @Input() reorderItems: boolean = false;
  @Input() disableReorderRow: boolean = false;
  @Input() columns: ColumnConfig[] = [];
  @Input() data$!: Observable<any[]>; // Accepts the data as an observable
  constructor(
    private injector: Injector,
    private cdRef: ChangeDetectorRef
  ) { }

  public onPressRow(rowData: any, rowIndex: number): void {
    this.selectedRowIndex = rowIndex;
    this.onPressEvent.emit(rowData);
  }

  ngOnInit() {
    this.data$?.subscribe((data) => {
      // Trigger change detection to update the view when data changes
      this.tableData = JSON.parse(JSON.stringify(data));
      this.cdRef.detectChanges();
    });
  }

  public createInjector(
    inputs: { [key: string]: any }
  ): Injector {
    const inputProviders = Object.keys(inputs || {}).map((key) => ({
      provide: key,
      useValue: inputs[key],
    }));
    return Injector.create({
      providers: inputProviders,
      parent: this.injector,
    });
  }

  public attachOutputs(
    componentRef: any,
    outputs: { [key: string]: (event: any) => void }
  ): void {
    Object.keys(outputs).forEach((outputKey) => {
      if (componentRef.instance[outputKey]) {
        componentRef.instance[outputKey].subscribe(outputs[outputKey]);
      }
    });
  }

  public dropHeader(event: CdkDragDrop<string[]>): void {
    moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
  }

  public drop(event: CdkDragDrop<any[] | null, any, any>): void {
    moveItemInArray(
      event.container.data!,
      event.previousIndex,
      event.currentIndex
    );

    this.onReorder.emit(event);
  }
}