import * as chrono from 'chrono-node'
import { TapiContact } from './tapi-contact'
import { axios, extractNumber } from './utils'

export class CallHistory {
  private callerIds: { [number: string]: TapiContact } = {}

  private updateCallHistoryEntry (call: HTMLElement, callerId: TapiContact) {
    if (callerId.tD_NAME !== '') {
      var span = call.querySelector('span')

      this.showTimeManager(call, span.nextSibling.textContent, callerId)

      var text = span.textContent
      span.textContent = callerId.tD_NAME
      var br = document.createElement('br')
      var span2 = document.createElement('span')
      span2.style.fontSize = 'small'
      span2.textContent = text
      span.parentNode.insertBefore(br, span.nextSibling)
      span.parentNode.insertBefore(span2, span.nextSibling)
    }
  }

  private showTimeManager (call: HTMLElement, time: string, callerId: TapiContact) {
    if (!callerId.tD_ID) {
      return
    }

    var timeParts = time.split(/, /)
    var duration = '00:00:00'
    if (timeParts.length >= 1) {
      time = timeParts[0]
    }
    if (timeParts.length >= 2) {
      duration = timeParts[1]
    }
    var parsedDate = chrono.de.parseDate(time)
    if (!parsedDate) {
      parsedDate = chrono.parseDate(time)
    }
    if (!parsedDate) {
      return
    }
    var parsedDuration = chrono.parseDate(duration)
    console.log('TAPI call history time:', time, 'parsedDate:', parsedDate, 'duration:', duration, 'parsedDuration:', parsedDuration)

    var connect = parsedDate.getFullYear().toString() +
      (parsedDate.getMonth() + 1).toString().padStart(2, '0') + // (January gives 0)
      parsedDate.getDate().toString().padStart(2, '0') +
      parsedDate.getHours().toString().padStart(2, '0') +
      parsedDate.getMinutes().toString().padStart(2, '0')

    var length = (parsedDuration.getHours() * 60 + parsedDuration.getMinutes()).toString()

    var toolbar = call.querySelector('.wcToolbarTiles')
    var a = document.createElement('a')
    var href = 'domizil://PM/Zeitbuchung?KontaktId=' + callerId.tD_ID + '&connect=' + connect + '&length=' + length
    a.dataset.domizilLink = href
    a.onclick = () => {
      window.open(href)
    }
    a.innerHTML = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 559.98 559.98" width="20" height="20">' +
      '<g>' +
      '  <g>' +
      '    <path d="M279.99,0C125.601,0,0,125.601,0,279.99c0,154.39,125.601,279.99,279.99,279.99c154.39,0,279.99-125.601,279.99-279.99' +
      '      C559.98,125.601,434.38,0,279.99,0z M279.99,498.78c-120.644,0-218.79-98.146-218.79-218.79' +
      '      c0-120.638,98.146-218.79,218.79-218.79s218.79,98.152,218.79,218.79C498.78,400.634,400.634,498.78,279.99,498.78z"/>' +
      '    <path d="M304.226,280.326V162.976c0-13.103-10.618-23.721-23.716-23.721c-13.102,0-23.721,10.618-23.721,23.721v124.928' +
      '      c0,0.373,0.092,0.723,0.11,1.096c-0.312,6.45,1.91,12.999,6.836,17.926l88.343,88.336c9.266,9.266,24.284,9.266,33.543,0' +
      '      c9.26-9.266,9.266-24.284,0-33.544L304.226,280.326z"/>' +
      '  </g>' +
      '</g>' +
      '</svg>'
    toolbar.insertBefore(a, toolbar.firstChild)
  }

  public async showCallHistory (element: HTMLElement) {
    var span = element.querySelector('span')
    var number = extractNumber(span.textContent)
    if (!number) {
      return
    }

    if (this.callerIds[number] !== undefined) {
      this.updateCallHistoryEntry(element, this.callerIds[number])
    } else {
      var response = await axios.get<TapiContact>('http://cpatapi.cpsrvweb2016.cp-austria.at/callerid/' + encodeURIComponent(number))
      var callerId: TapiContact = { tD_NAME: '' }
      if (response.status === 200) {
        callerId = response.data
      }
      console.log('TAPI call histroy callerid response', number, response, callerId)
      this.callerIds[number] = callerId
      this.updateCallHistoryEntry(element, callerId)
    }
  }
}