utils = require('@/utils/utils')
socket_io_client_1 = require('socket.io-client')
Function::property = (name, getset) -> Object.defineProperty @prototype, name, getset

class Story
  constructor: (options) ->
    @_listenerRemoveFunctions = []
    @_avatarSrc = ''
    @rootElement = @_createTemplate options
    @_elems =
      title: @rootElement.querySelector '.gobi-popup-story__title'
      description: @rootElement.querySelector '.gobi-popup-story__description'
      avatar: @rootElement.querySelector '.gobi-popup-story__avatar'
      avatarContainer: @rootElement.querySelector '.gobi-popup-story__avatar-container'
    @id = options.id or ''
    @viewKey = options.viewKey or ''
    @secretKey = options.secretKey or ''
    @_title = options.title or ''
    @avatarSrc = options.avatarSrc or ''
    if @id or @viewKey
      if !options.avatarSrc or !@_title
        promise = undefined
        if @viewKey
          promise = utils.fetchAvatarAndTitleGivenViewKey @viewKey
          promise.catch (error) =>
            # story likely empty, assume it is empty
            # assume storyName is viewKey, not always true
            storyName = @viewKey
            if @secretKey then @putQrInAvatar storyName, @secretKey
          @setupSocketToListenForNewMediaInStory()
        else
          promise = utils.fetchAvatarAndTitleGivenStoryId @id
        promise.then (data) =>
          @avatarSrc = @avatarSrc or data.src
          @title = @title or data.title
    else
      @secretKey = utils.makeRandomStorySecretKey()
      @viewKey = utils.makeViewKey @secretKey
      storyName = @viewKey.slice(0, 20)
      @putQrInAvatar storyName, @secretKey
      # User now scans this QR with their phone, and adds a video
      @setupSocketToListenForNewMediaInStory()
    @_description = options.description or ''
    @_color = options.color or ''
    @setupOnSelectListener options.onSelect
    options.container?.appendChild @rootElement
    if options.titleColor
      @_elems.title.style.color = options.titleColor
    if options.descriptionColor
      @_elems.description.style.color = options.descriptionColor
    if options.titleSize
      @_elems.title.style.fontSize = options.titleSize
    if options.descriptionSize
      @_elems.description.style.fontSize = options.descriptionSize
    s = options.avatarSize or '96px'
    @_elems.avatarContainer.style.width = s
    @_elems.avatarContainer.style.margin = 'calc(.1*' + s + ') calc(.2*' + s + ')'
    # @_elems.avatarContainer.style.padding = Math.max((parseInt(s or 96)/9-5), 4) + 'px'
    @_elems.avatarContainer.style.padding = 'calc(' + s + '/9-5px)'
    @_elems.avatarContainer.addEventListener 'mouseenter', (e) =>
      @_elems.avatarContainer.style.width = 'calc(1.2*' + s + ')'
      @_elems.avatarContainer.style.margin = '0px calc(.1*' + s + ')'
    @_elems.avatarContainer.addEventListener 'mouseleave', (e) =>
      @_elems.avatarContainer.style.width = s
      @_elems.avatarContainer.style.margin = 'calc(.1*' + s + ') calc(.2*' + s + ')'
    @_selected = ! !options.selected
    @title = @_title
    @description = @_description
    @color = @_color
  setupOnSelectListener: (onSelect) ->
    onSelect = onSelect.bind @, @
    selectArea = @rootElement.querySelector '[data-select-area]'
    selectArea.addEventListener 'click', onSelect
    @_listenerRemoveFunctions.push ->
      selectArea.removeEventListener 'click', onSelect
  @property 'avatarSrc',
    get: ->
      @_avatarSrc
    set: (src) ->
      @_avatarSrc = src
      @_elems.avatar.style.backgroundImage = 'url(' + src + ')'
  checkForVideoInStory: ->
    promise = utils.fetchAvatarAndTitleGivenViewKey @viewKey
    promise.then (data) ->
      @avatarSrc = data.src
      @title = data.title
  mediaDetected: (media) ->
    @socket.disconnect()
    @checkForVideoInStory()
  socketConnected: ->
    @socket.on 'media', => @mediaDetected()
    @socket.emit 'subscribe_to_story_media', viewKey: @viewKey
  setupSocketToListenForNewMediaInStory: ->
    @socket = socket_io_client_1 'https://live.gobiapp.com'
    @socket.on 'connect', => @socketConnected()
  putQrInAvatar: (storyName, secretKey) ->
    data = utils.makeBranchQueryData storyName, secretKey
    result = await utils.getBranchLink data
    qrData = result.url
    @title = qrData
    dataUrl = await utils.qrDataToDataUrl qrData
    @avatarSrc = dataUrl
  destroy: ->
    if @rootElement.parentElement
      @rootElement.parentElement.removeChild @rootElement
    i = @_listenerRemoveFunctions.length
    while i--
      @_listenerRemoveFunctions[i]()
  @property 'selected',
    get: ->
      @_selected
    set: (selected) ->
      if selected
        @rootElement.classList.add 'gobi-story--selected'
      else
        @rootElement.classList.remove 'gobi-story--selected'
      @_selected = selected
  @property 'title',
    get: ->
      @_title
    set: (title) ->
      @_title = title
      if title.match(/[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/)
        @_elems.title.href = title
        @_elems.title.textContent = title.replace(new RegExp('^https?://'), '')
      else
        @_elems.title.textContent = title
        delete @_elems.title.href
  @property 'description',
    get: ->
      @_description
    set: (description) ->
      @_description = description
      @_elems.description.textContent = description
  @property 'color',
    get: ->
      @_color
    set: (color) ->
      @_color = color
      avatarCircleBorder = @_elems.avatarContainer.querySelector '.gobi-popup-story__avatar-circle'
      avatarCircleBorder?.style.stroke = color
  _createTemplate: (options) ->
    # "desktop": const classPrefix = 'gobi-story';
    classPrefix = 'gobi-popup-story'
    container = document.createElement('div')
    container.classList.add 'gobi-popup-story'
    playIconSvg = ''
    if options.showPlayIcon
      playIconSvg = require('../play-icon-circle.svg').default
    container.innerHTML = '<div class="gobi-popup-story__avatar-container" data-select-area data-avatarContainer>' +
        '<div class="gobi-popup-story__avatar" data-avatar>' +
        '</div>' +
        '<svg class="gobi-popup-story__avatar-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">' +
        '  <circle class="gobi-popup-story__avatar-circle" cx="60" cy="60" r="57" fill="none" stroke="#15d6ea" stroke-width="3" stroke-dasharray="370.52" stroke-dashoffset="370.52" />' +
        '</svg>' +
        '<div class="svg-holder">' +
          playIconSvg +
        '</div>' +
      '</div>' +
      '<a class="gobi-popup-story__title" target="_blank" data-title></a>' +
      '<div class="gobi-popup-story__description"><div class="gobi-popup-story__description-text"></div></div>'
    container

module.exports = Story