

// bip sound
// http://soundbible.com/mp3/A-Tone-His_Self-1266414414.mp3

(function (factory) {

  // checking for exports avalible
  if (typeof module !== 'undefined' && module.exports) {
    // export Collection
    module.exports = factory
  } else {
    // else add to root variable
    window['naranja'] = factory
  }

})(function () {

  function setSideUpAnimation (finalNotification) {
    setTimeout(function () {

      var notificaciónHeight = finalNotification
        .querySelector('.naranja-body-notification')
        .offsetHeight

      finalNotification.style.height = notificaciónHeight + 'px'
    }, 0)
  }

  function createText (text) {
    return document.createTextNode(text)
  }

  /**
  * provide a reusable way to create html
  * elements
  * @param tag String – html tag name
  * @param classes Array<String> – html tag classes
  */

  function createElement (tag, classes) {
    var $HTMLElement = document.createElement(tag)
    if ( !!classes ) {
      classes.forEach(function (className) {
        $HTMLElement.classList.add(className)
      })
    }

    return $HTMLElement
  }

  var $narjContainer = document.querySelector('.naranja-notification-box')

  if (!$narjContainer) {
    $narjContainer = createElement('div', ['naranja-notification-box'])
    $newNotificationsAdvice = createElement('div', ['naranja-notification-advice'])
    $newNotificationsAdvice.addEventListener('click', function () {
      $narjContainer.scrollTop = '0'
    })
    $narjContainer.appendChild($newNotificationsAdvice)

    document.body.appendChild($narjContainer)
  }

  $narjContainer.__proto__.unshifElement = function (node) {
    this.insertBefore(node, this.childNodes[0])
  }

  $narjContainer.addEventListener('scroll', function (e) {
    if (e.currentTarget.scrollTop < 20) {
      $newNotificationsAdvice.classList.remove('active')
    }
  })

  return {
    log: function (argm) {
      this.createNotification('log', argm)
    },
    success: function (argm) {
      this.createNotification('success', argm)
    },
    warn: function (argm) {
      this.createNotification('warn', argm)
    },
    error: function (argm) {
      this.createNotification('error', argm)
    },

    /*
    * Internal methods for
    * launch notifications
    */
    createNotification: function (type, argm) {

      this.type = type
      this.title = argm.title
      this.text = argm.text
      this.icon = (argm.icon === undefined) ? true : argm.icon
      this.buttons = argm.buttons

      var $notification = this.$createContainer()
      var $body = $notification.querySelector('div')

      this.$notification = $notification
      this.$body = $body

      // render icon if exists
      if (this.icon) {
        var $iconContainer = createElement('div', [
          'naranja-icon',
          'narj-icon-' + type
        ])

        $iconContainer.innerHTML = this.chooseIcon[type]

        $body.appendChild($iconContainer)
      }

      var $title = this.createTitle()
      var $text = this.createText()

      var $textAndTitleContainer = createElement('div', [
        'naranja-text-and-title'
      ])

      $textAndTitleContainer.appendChild($title)
      $textAndTitleContainer.appendChild($text)

      $body.appendChild($textAndTitleContainer)

      // render buttons fragment if exists
      if (this.buttons) {
        var $buttons = this.createButtons($notification, $body)

        $body
          .querySelector('.naranja-text-and-title')
          .appendChild($buttons)
      }


      var $close = createElement('div', [
        'naranja-close-icon'
      ])

      $close.addEventListener('click', (function () {
        this.closeNotification()
      }).bind(this))

      // var $close = document.createElement('div')
      // $close.classList.add('naranja-close-icon')
      $close.innerHTML = this.chooseIcon.close

      $body.appendChild($close)

      $narjContainer.unshifElement($notification)
      setSideUpAnimation($notification)

      if ($narjContainer.scrollTop > 20) {
        $newNotificationsAdvice.classList.add('active')
        $newNotificationsAdvice.innerHTML = this.chooseIcon.newNotification
      }

      if (argm.timeout !== 'keep') {
        setTimeout(
          (function () {
            this.closeNotification()
          }).bind(this),
          argm.timeout || 5000
        )
      }
    },
    $createContainer: function () {
      // generate box for notification

      var $container = createElement('div', [
        'naranja-notification',
        'naranja-' + this.type
      ])

      var $innerContainer = createElement('div', [
        'naranja-body-notification',
        'narj-' + this.type
      ])

      $container.appendChild($innerContainer)

      return $container
    },
    createTitle: function () {
      var $parragraph = createElement('p', [
        'naranja-title'
      ])
      var $tt = createText(this.title)
      $parragraph.appendChild($tt)

      return $parragraph
    },
    createText: function () {
      var $title = createElement('p', [
        'naranja-parragraph'
      ])

      var $tx = document.createTextNode(this.text)
      $title.appendChild($tx)

      return $title
    },
    createButtons: function ($notification, $body) {
      var $buttonsContainer = createElement('div', [
        'naranja-buttons-container'
      ])

      var self = this

      this.buttons.forEach(function (button) {
        var $buttonElement = createElement('button')
        $buttonElement.appendChild(document.createTextNode(button.text))

        $buttonElement.addEventListener('click', function (event) {

          self.removeNotification = true
          event.preventClose = function () {
            self.removeNotification = false
          }

          event.closeNotification = function () {
            self.closeNotification()
          }

          button.click(event)

          if (self.removeNotification) self.closeNotification()
        })

        $buttonsContainer.appendChild($buttonElement)
      })

      return $buttonsContainer
    },
    closeNotification: function () {
      var self = this
      if ( !this.elementWasRemoved ) {
        self.$body.style.opacity = '0'
        setTimeout(function () {
          self.$body.style.marginTop = '0px'
          self.$body.style.marginBottom = '0px'
          self.$body.style.padding = '0px'
          self.$notification.style.height = 0 + 'px'
          self.$notification.style.padding = 0 + 'px'
          setTimeout(function () {
            self.$notification
              .parentNode
              .removeChild(
                self.$notification
              )
          }, 600);
          if ($narjContainer.scrollTop < 20) {
            $newNotificationsAdvice.classList.remove('active')
          }
        }, 150)
      }
      this.elementWasRemoved = true
    },
    chooseIcon: {
      log: '',

      success: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="24" cy="24" r="24" fill="#6ED69A" fill-opacity="0.62"/><path d="M36 16.5L19.5 33L12 25.5" stroke="#11B674" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',

      warn: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="24" cy="24" r="24" fill="#F5CE69"/><path d="M24 16.5C24.8285 16.5 25.5 17.1716 25.5 18V24C25.5 24.8284 24.8285 25.5 24 25.5C23.1715 25.5 22.5 24.8284 22.5 24V18C22.5 17.1716 23.1715 16.5 24 16.5Z" fill="#DCA14E"/><path d="M25.5 28.5C25.5 27.6716 24.8285 27 24 27C23.1715 27 22.5 27.6716 22.5 28.5V30C22.5 30.8284 23.1715 31.5 24 31.5C24.8285 31.5 25.5 30.8284 25.5 30V28.5Z" fill="#DCA14E"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 24C7.5 14.8873 14.8873 7.5 24 7.5C33.1127 7.5 40.5 14.8873 40.5 24C40.5 33.1127 33.1127 40.5 24 40.5C14.8873 40.5 7.5 33.1127 7.5 24ZM24 10.5C16.5441 10.5 10.5 16.5442 10.5 24C10.5 31.4558 16.5441 37.5 24 37.5C31.4559 37.5 37.5 31.4558 37.5 24C37.5 16.5442 31.4559 10.5 24 10.5Z" fill="#DCA14E"/></svg>',

      error: '<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="24" cy="24" r="24" fill="#ED8476"/><path d="M34.0607 16.0607C34.6465 15.4749 34.6465 14.5251 34.0607 13.9393C33.4749 13.3536 32.5251 13.3536 31.9394 13.9393L24 21.8787L16.0607 13.9393C15.4749 13.3536 14.5251 13.3536 13.9394 13.9393C13.3535 14.5251 13.3535 15.4749 13.9394 16.0607L21.8787 24L13.9394 31.9393C13.3535 32.5251 13.3535 33.4749 13.9394 34.0607C14.5251 34.6464 15.4749 34.6464 16.0607 34.0607L24 26.1213L31.9394 34.0607C32.5251 34.6464 33.4749 34.6464 34.0607 34.0607C34.6465 33.4749 34.6465 32.5251 34.0607 31.9393L26.1213 24L34.0607 16.0607Z" fill="#C54F4F"/></svg>',

      close: '<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.70711 1.7071C10.0976 1.31659 10.0976 0.683407 9.70711 0.292889C9.31659 -0.0976295 8.68341 -0.0976295 8.29289 0.292889L5 3.58578L1.70711 0.292889C1.31659 -0.0976295 0.68342 -0.0976295 0.292894 0.292889C-0.0976315 0.683407 -0.0976315 1.31659 0.292894 1.7071L3.58579 5L0.292894 8.29289C-0.0976315 8.68341 -0.0976315 9.31659 0.292894 9.7071C0.68342 10.0976 1.31659 10.0976 1.70711 9.7071L5 6.41421L8.29289 9.7071C8.68341 10.0976 9.31659 10.0976 9.70711 9.7071C10.0976 9.31659 10.0976 8.68341 9.70711 8.29289L6.41422 5L9.70711 1.7071Z" fill="black" fill-opacity="0.37"/></svg>',

      newNotification: '<svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(#filter0_d)"><circle cx="20.5" cy="16.5" r="16.5" fill="#C08AE1"/></g><path d="M13 21L21 13L29 21" stroke="black" stroke-opacity="0.6" stroke-width="3"/><defs><filter id="filter0_d" x="0" y="0" width="41" height="41" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="2"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/></filter></defs></svg>'
    }
  }
})

