import supportDom from '../decorators/supportDom'

@supportDom export default class ToastItem {

constructor(options = {}) {
  this.options = options
  this.init()
}

init() {

  const { message, btnText, btnCb } = this.options

  const dom = document.createElement('div')
  dom.innerHTML = `
    <div class="toast-item">
      <div class="toast-message">${message}</div>
    </div>
  `
  dom.className = 'toast-item-box'

  this.dom = dom

  if (btnText) {
    this.dom.classList.add('has-btn')
    this.createBtn(btnText)
  }
  if (btnText && btnCb) {
    this.createBtnCb()
  }
}

show() {
  this.dom.classList.add('visible')
}

createBtn() {
  const btn = document.createElement('button')
  btn.className = 'toast-btn'
  btn.innerText = this.options.btnText
  this.dom.querySelector('.toast-item').appendChild(btn)
  this.btn = btn
}

createBtnCb() {
  this.addEvent(this.btn, 'click', () => {
    this.options.btnCb({
      clear: () => {
        this.destroy()
      }
    })
  })
}

destroy() {
  const { dom } = this
  clearTimeout(dom._showTimer)
  clearTimeout(dom._timer)
  dom.remove()
}

}