import {
  Component,
  Input,
  OnInit,
  ViewChild,
  Output,
  EventEmitter,
  AfterViewInit,
  OnChanges,
  SimpleChanges,
} from "@angular/core";
import { Observable, ReplaySubject, Subject } from "rxjs";
import { AppContext } from "../../../components/app-context/app.context";
import { MatMenu } from "@angular/material/menu";

import { DataListState } from "../default-footer-component/default-data-list-footer.component";
import { Column, SelectionParams } from "../../interfaces/list.interfaces";
import { DataListActionsService } from "../default-footer-component/data-list-actions.service";
import { IgxGridCell } from "@infragistics/igniteui-angular";
import { DataListApi } from "../data-list.api";
import { InteractionMenuComponent } from "../../../components/interactions/interaction-menu.component";

const DEFAULT_ACTION_CONFIGURATION = {
  hidden: false,
  selectors: {
    target: ["default-data-list-footer", "default-data-list-context-menu"],
  },
};

const CONDITION_HAS_SELECTION = [
  (config, param) => param && param.selected > 0,
];

const CONDITION_HAS_CONTENT = [(config, param) => param && param.total > 0];

@Component({
  selector: "nm-grid-contextmenu",
  styleUrls: ["./data-list-context-menu.component.scss"],
  templateUrl: "./data-list-context-menu.component.html",
})
export class DataListContextMenuComponent implements AfterViewInit, OnChanges {
  @Input()
  public menuTrigger;

  @ViewChild(InteractionMenuComponent) menu: InteractionMenuComponent;

  public menuObs = new Subject();

  @Input()
  public set cell(cell) {
    this.cellSubject.next(cell);
  }

  @Input("selected-items")
  selectedItems: Observable<SelectionParams>;

  @Input()
  total: Observable<number>;

  @Input()
  grid;

  @Input()
  public api: DataListApi;

  @Input()
  link: Observable<string>;

  @Input()
  public set column(column: Column) {
    this.columnSubject.next(column);
  }

  @Output()
  closeContextMenu = new EventEmitter();

  @Output()
  export = new EventEmitter<any>();

  @Input()
  public set configuration(configuration: any) {
    this._configuration = Object.assign(
      {},
      DEFAULT_ACTION_CONFIGURATION,
      configuration.contextmenu || {}
    );
  }

  _configuration;

  private columnSubject = new ReplaySubject<Column>(1);
  private cellSubject = new ReplaySubject<IgxGridCell>(1);

  visible: boolean = false;
  stateObservable: Observable<DataListState>;

  constructor(
    private appContext: AppContext,
    private dataListActionsService: DataListActionsService
  ) {}

  ngAfterViewInit(): void {
    this.menuObs.next(this.menu.menu);
  }

  public get configuration(): any {
    return this._configuration;
  }

  ngOnChanges(changes: SimpleChanges): void {
    //Wait till the api is here before initializing
    if (changes.api && this.api) {
      this.stateObservable = this.dataListActionsService.mapSelectionState(
        this.total,
        this.selectedItems,
        this.link,
        [],
        this.columnSubject,
        this.cellSubject,
        this.grid,
        this.api,
        this.export
      );
    }
  }

  public onExecute() {
    this.menuTrigger
      ? this.menuTrigger.closeMenu()
      : this.closeContextMenu.emit();
  }
}