import './status.css';
import { ZcStatus } from './zc-status';
import GM_fetch from "@trim21/gm-fetch";

declare function waitForKeyElements(selectorOrFunction: any, callback: any, waitOnce: boolean): any;

export class Status {
  private _user: string;
  private _enabled = false;
  private _statusOn = 'menuAvailable';
  private _statusOff = 'menuAway';
  private _currentStatus: boolean = undefined;

  public async showStatus(element: HTMLElement) {
    this._user = await GM.getValue('tapi-zc-user', '');
    this._enabled = await GM.getValue('tapi-zc-enabled', false);
    this._statusOn = await GM.getValue('tapi-zc-on', 'menuAvailable');
    this._statusOff = await GM.getValue('tapi-zc-off', 'menuAvailable');
    console.log('tapi-zc-user', this._user, 'tapi-zc-enabled', this._enabled, 'tapi-zc-on', this._statusOn, 'tapi-zc-off', this._statusOff);

    this.checkStatus();

    waitForKeyElements("wc-account-menu > div > ul", (element: HTMLElement) => { this.addZcStatusPopup(element) }, true);
  }

  private async checkStatus() {
    if (this._enabled) {
      try {
        var response = await GM_fetch('http://cpatapi.cpsrvweb2016.cp-austria.at/availability/' + encodeURIComponent(this._user));
        if (response.status == 200) {
          var status = await response.json() as ZcStatus;
          if (this._currentStatus !== status.loggedIn) {
            this._currentStatus = status.loggedIn;
            console.log('New status, loggedIn', this._currentStatus);
            var accMenu = document.getElementsByTagName("wc-account-menu")[0];
            var avatar = accMenu.getElementsByTagName("app-avatar")[0] as HTMLAnchorElement;
            avatar.click();
            setTimeout(() => {
              var statusId = this._currentStatus ? this._statusOn : this._statusOff;
              console.log('Clicking status', statusId);
              (document.getElementById(statusId) as HTMLSpanElement).click();
            }, 1000);
          }
        }
      } catch (error) {
        console.log(error);
      }
      setTimeout(() => this.checkStatus(), 30000);
    }
  }

  private addZcStatusPopup(element: HTMLElement) {
    var divider = document.createElement('li');
    divider.classList.add('divider');
    divider.classList.add('dropdown-divider');
    element.appendChild(divider);

    var menu = document.createElement('li');
    element.appendChild(menu);

    var link = document.createElement('a');
    link.id = 'tapi-zc-button';
    link.innerText = 'ZeitConsens';
    link.classList.add('dropdown-item');
    link.classList.add('d-flex');
    link.onclick = () => {
      document.getElementById('zc-modal').classList.toggle('show');
    }
    menu.appendChild(link);

    var html =
    '<div role="document" class="modal-dialog">' +
    '  <div class="modal-content">' +
    '    <div class="modal-header">' +
    '      <h4 class="modal-title">ZeitConsens Status</h4><button id="zc-btnClose" type="button" aria-label="Close" class="btn-close"  data-qa="modal-cross"></button>' +
    '    </div>' +
    '    <div class="modal-body">' +
    '      <div class="form-group">' +
    '        <label for="tapi-zc-user">Username</label>' +
    '        <input type="text" class="form-control" name="tapi-zc-user" id="tapi-zc-user">' +
    '      </div>' +
    '      <div class="form-group">' +
    '        <label for="tapi-zc-on">Signed in</label>' +
    '        <select id="tapi-zc-on" class="form-control">' +
    '          <option value="menuAvailable">Available</option>' +
    '          <option value="menuOutofoffice">Do Not Disturb</option>' +
    '          <option value="menuCustom1">Verfügbar DW</option>' +
    '        </select>' +
    '      </div>' +
    '      <div class="form-group">' +
    '        <label for="tapi-zc-off">Signed out</label>' +
    '        <select id="tapi-zc-off" class="form-control">' +
    '          <option value="menuAway">Away</option>' +
    '          <option value="menuOutofoffice">Do Not Disturb</option>' +
    '        </select>' +
    '      </div>' +
    '      <div class="checkbox">' +
    '        <label class="i-checks" for="tapi-zc-enabled">' +
    '          <input type="checkbox" id="tapi-zc-enabled">' +
    '          <i></i><span>Enabled</span>' +
    '      </label>' +
    '      </div>' +
    '    </div>' +
    //'    <div class="modal-footer">' +
    //'      <button id="zc-btnOk" type="button" class="btn btn-primary" data-qa="modal-ok">OK </button>' +
    //'      <button id="zc-btnCancel" type="button" class="btn btn-border" data-qa="modal-close">Cancel </button>' +
    //'    </div>' +
    '  </div>' +
    '</div>';
    var modal = document.createElement('modal-container');
    modal.id = 'zc-modal';
    modal.classList.add('modal');
    modal.classList.add('fade');
    modal.innerHTML = html;
    document.getElementsByTagName('body')[0].appendChild(modal);

    var btnClose = document.getElementById('zc-btnClose');
    btnClose.onclick = () => {
      document.getElementById('zc-modal').classList.toggle('show');
    }

    var zcUser = document.getElementById('tapi-zc-user') as HTMLInputElement;
    zcUser.value = this._user;
    zcUser.onchange = () => {
      this._user = zcUser.value;
      GM.setValue('tapi-zc-user', this._user);
      console.log('tapi-zc-user', this._user);
      this._currentStatus = undefined;
    }

    var zcEnabled = document.getElementById('tapi-zc-enabled') as HTMLInputElement;
    zcEnabled.checked = this._enabled;
    zcEnabled.onchange = () => {
      this._enabled = zcEnabled.checked;
      GM.setValue('tapi-zc-enabled', this._enabled);
      console.log('tapi-zc-enabled', this._enabled);
      this._currentStatus = undefined;
      this.checkStatus();
    }

    var zcOn = document.getElementById('tapi-zc-on') as HTMLSelectElement;
    zcOn.value = this._statusOn;
    zcOn.onchange = () => {
      this._statusOn = zcOn.value;
      GM.setValue('tapi-zc-on', this._statusOn);
      console.log('tapi-zc-on', this._statusOn);
      this._currentStatus = undefined;
    }

    var zcOff = document.getElementById('tapi-zc-off') as HTMLSelectElement;
    zcOff.value = this._statusOff;
    zcOff.onchange = () => {
      this._statusOff = zcOff.value;
      GM.setValue('tapi-zc-off', this._statusOff);
      console.log('tapi-zc-off', this._statusOff);
      this._currentStatus = undefined;
    }
  }
}