import { ChatHistoryUtils } from './../../utils/chat-history-utils';
import { bindable, bindingMode, customElement } from "aurelia-framework";
import * as breeze from 'breeze-client';
import { Box } from '../../modules/box';
import { HistoryViewBox } from './../../modules/dialogs/history-view-box';
import { ChatViewBox } from './../../modules/dialogs/chat-view-box';
import { HttpClient } from 'aurelia-fetch-client';
import { Config } from '../../config';

@customElement("ui-button-detail")
export class UIButtonDetail {
  @bindable({ defaultBindingMode: bindingMode.toView })
  public fnBack: Function;
  @bindable({ defaultBindingMode: bindingMode.toView })
  public fnCancel: Function;
  @bindable({ defaultBindingMode: bindingMode.toView })
  public fnSave: Function;
  @bindable({ defaultBindingMode: bindingMode.toView })
  public fnAdd: Function;
  @bindable({ defaultBindingMode: bindingMode.toView })
  public fnDelete: Function;
  @bindable({ defaultBindingMode: bindingMode.toView })
  public canSave: boolean;
  @bindable({ defaultBindingMode: bindingMode.toView })
  public canCancel: boolean;
  @bindable({ defaultBindingMode: bindingMode.toView })
  public canAdd: boolean;
  @bindable({ defaultBindingMode: bindingMode.toView })
  public canDelete: boolean;
  @bindable({ defaultBindingMode: bindingMode.toView })
  public displaySave: boolean = true;
  @bindable({ defaultBindingMode: bindingMode.toView })
  public displayCancel: boolean = true;
  @bindable({ defaultBindingMode: bindingMode.toView })
  public displayAdd: boolean = false;
  @bindable({ defaultBindingMode: bindingMode.toView })
  public displayDelete: boolean = false;
  @bindable({ defaultBindingMode: bindingMode.toView })
  public displayBack: boolean = true;

  @bindable({ defaultBindingMode: bindingMode.toView })
  public showHistory: boolean;
  @bindable({ defaultBindingMode: bindingMode.toView })
  public showChat: boolean;
  @bindable()
  public entity: breeze.Entity;

  constructor(private httpClient: HttpClient, private config: Config, protected element: Element, private box: Box, private utils: ChatHistoryUtils) {
    if (element.hasAttribute("align-end")) {
      element.classList.add("ui-row--end");
    }
  }

  attached() {
    if (this.showChat == null)
      this.showChat = this.config.communicationConfig.showHistoryChatInButton;
    if (this.showHistory == null)
      this.showHistory = this.config.communicationConfig.showHistoryChatInButton;
  }

  async entityChanged(newValue, oldValue) {
    if (newValue != oldValue) {
      this.utils.viewHistory = await this.utils.canViewHistory(this.entity);
      this.utils.viewChat = await this.utils.canViewChat(this.entity);
    }
  }

  private async openChatViewBox() {
    if (this.utils.viewChat && this.entity != null) {
      this.box.showFloatingBox(new ChatViewBox(this.entity));
    }
  }

  private async openHistoryViewBox() {
    if (this.utils.viewHistory && this.entity != null) {
      this.box.showFloatingBox(new HistoryViewBox(this.entity));
    }
  }
}