import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  EventEmitter,
  Input,
  Output,
  OnDestroy,
  OnInit,
} from "@angular/core";
import {
  IChangeCheckboxEventArgs,
  IGroupByRecord,
  IgxGridBaseDirective,
  IgxGridComponent,
} from "@infragistics/igniteui-angular";
import { Subscription } from "rxjs";
import { ViewAttributeComponent } from "../../../components/edit-attribute/view-attribute.component";
import { Attributes } from "../../../components/edit-attribute";

@Component({
  selector: "nm-data-list-group-component",
  template: `
    <div class="igx-group-label">
      <igx-checkbox
        [checked]="selectionState == 'all'"
        [indeterminate]="selectionState == 'some'"
        (change)="onChange($event)"
      >
        <span class="nm-label"> {{ columnTitle }}: </span> {{ value }}
      </igx-checkbox>
      &nbsp;&nbsp;<igx-chip displayDensity="compact">{{
        record.records.length
      }}</igx-chip>
    </div>
  `,
  styles: [
    `
      .igx-group-label {
        padding-left: 1px;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DataListGroupRowComponent implements OnInit, OnDestroy {
  @Input()
  set grid(grid: IgxGridComponent) {
    this._grid = grid;
    this.updateRecordIds();
  }

  private _grid: IgxGridComponent;

  @Input()
  set record(record: IGroupByRecord) {
    this._record = record;
    this.updateRecordIds();
  }

  @Output()
  groupSelectionChange = new EventEmitter();

  get record(): IGroupByRecord {
    return this._record;
  }

  private _record: IGroupByRecord;
  private _recordIds: Set<string>;
  private _selectionSubscription: Subscription;

  public value: string;
  public columnTitle: string;
  public selectionState: string = "none";

  constructor(private cdr: ChangeDetectorRef) {}

  private updateRecordIds() {
    if (this._grid && this._record) {
      let pk = this._grid.primaryKey;
      let ids = this._record.records.map((row) => row[pk]);
      this._recordIds = new Set(ids);

      this.updateComponent(this._grid.selectedRows);
    }
  }

  private updateComponent(selection: any[]) {
    this.updateSelection(selection);
    this.updateRow();

    this.cdr.detectChanges();
  }

  private updateRow() {
    let fieldName = this._record.expression.fieldName;
    let column = this._grid.getColumnByName(fieldName);
    this.columnTitle = column ? column.header : fieldName;

    let value =
      this._record && this._record.value ? this._record.value : "<empty>";
    value =
      typeof value == "string"
        ? value
        : Attributes.formatAttributeToString(this._record.value);
    this.value = `"${value}"`;
  }

  private updateSelection(selection: any[]): boolean {
    let oldState = this.selectionState;

    let newState = "none";
    if (selection && selection.length > 0) {
      let selectedInGroup = 0;
      selection.forEach((id) => {
        if (this._recordIds.has(id)) {
          selectedInGroup++;
        }
      });

      if (selectedInGroup == this._recordIds.size) {
        newState = "all";
      } else if (selectedInGroup > 0) {
        newState = "some";
      }
    }

    this.selectionState = newState;

    return oldState !== newState;
  }

  onChange(event: IChangeCheckboxEventArgs) {
    let ids = Array.from(this._recordIds.values());
    if (event.checked) {
      this._grid.selectRows(ids);
    } else {
      this._grid.deselectRows(ids);
    }
    this.groupSelectionChange.emit({ newSelection: this._grid.selectedRows });
  }

  ngOnInit(): void {
    this._selectionSubscription = this._grid.rowSelected.subscribe((event) => {
      let selectionChanged = this.updateSelection(event.newSelection);
      if (selectionChanged) {
        this.cdr.markForCheck();
      }
    });
  }

  ngOnDestroy(): void {
    if (this._selectionSubscription) {
      this._selectionSubscription.unsubscribe();
    }
  }
}