import './presence.css'
import { fireChangeEvents } from './utils'

const iconArbeiten = require('./briefcase-regular-full.svg')
const iconBesprechung = require('./screen-users-sharp-regular-full.svg')
const iconFokus = require('./headphones-regular-full.svg')
const iconMittag = require('./grill-hot-regular-full.svg')
const iconFeierabend = require('./beer-mug-empty-regular-full.svg')

const QUICK_BUTTONS = [
  { icon: iconArbeiten,    menuId: 'menuCustom1',     message: '',            css: 'tapi-btn-available', title: 'Arbeiten' },
  { icon: iconBesprechung, menuId: 'menuOutofoffice', message: 'Besprechung', css: 'tapi-btn-dnd',       title: 'Besprechung' },
  { icon: iconFokus,       menuId: 'menuOutofoffice', message: 'Fokus',       css: 'tapi-btn-dnd',       title: 'Fokus' },
  { icon: iconMittag,      menuId: 'menuAway',        message: 'Mittag',      css: 'tapi-btn-away',      title: 'Mittag' },
  { icon: iconFeierabend,  menuId: 'menuAway',        message: 'Feierabend',  css: 'tapi-btn-away',      title: 'Feierabend' },
]

export class Presence {
  public createButtons (element: HTMLElement) {
    console.log('Create TAPI Presence')

    var form = document.getElementById('tapiForm')
    var searchBox = document.getElementById('tapiSearchBox')

    QUICK_BUTTONS.forEach(btn => {
      var button = document.createElement('button')
      button.type = 'button'
      button.innerHTML = btn.icon
      button.classList.add('tapi-quick-btn')
      button.classList.add(btn.css)
      button.title = btn.title
      button.onclick = () => { this.setStatus(btn.menuId, btn.message) }
      form.insertBefore(button, searchBox)
    })
  }

  private delay (ms: number): Promise<void> {
    return new Promise(resolve => setTimeout(resolve, ms))
  }

  private async setStatus (menuId: string, message: string) {
    var accMenu = document.getElementsByTagName('wc-account-menu')[0]
    var avatar = accMenu.getElementsByTagName('app-avatar')[0] as HTMLAnchorElement

    avatar.click()
    await this.delay(1000)

    if (message !== '') {
      var pencilBtn = document.getElementById(menuId + 'SetStatus') as HTMLElement
      if (pencilBtn) {
        pencilBtn.click()
        await this.delay(500)

        var modalInput = document.querySelector('input[data-qa="input"][maxlength="128"]') as HTMLInputElement
        if (modalInput) {
          modalInput.value = message
          fireChangeEvents(modalInput)
          await this.delay(300)

          var okBtn = Array.from(document.querySelectorAll('button')).find(btn =>
            btn.textContent && btn.textContent.trim() === 'OK' && btn.getBoundingClientRect().width > 0
          ) as HTMLButtonElement
          if (okBtn) {
            okBtn.click()
            await this.delay(500)
          }
        }
      }
    }

    var statusItem = document.getElementById(menuId) as HTMLElement
    if (!statusItem || statusItem.getBoundingClientRect().width === 0) {
      avatar.click()
      await this.delay(1000)
      statusItem = document.getElementById(menuId) as HTMLElement
    }
    if (statusItem) {
      statusItem.click()
    }
  }
}