const m = require('mithril')
const api = require('./api')
const Authentication = require('./authentication')
const lang = require('./lang')

const Article = {
  oninit: function(vnode) {
    Authentication.requiresLogin()
    this.error = ''
    this.path = ''
    this.data = null
    this.onbeforeupdate(vnode)
  },

  onbeforeupdate: function(vnode) {
    let path = m.route.param('id')
    if (this.path === path) return

    this.fetchArticle(vnode, path)
  },

  fetchArticle: function(vnode, path) {
    this.error = ''
    this.data = null
    this.path = path

    api.sendRequest({
      method: 'GET',
      url: '/api/auth/articles/' + this.path,
    })
    .then((result) => {
      this.data = result.article
      this.afterData()
    }, (err) => {
      this.error = err.message
    })
  },

  afterData: function() {
    if (!this.data) {
      this.error = 'Article not found'
    }
  },

  view: function(vnode) {
    console.log(this.data)
    return [
      api.loading ? m('div.loading-spinner') : null,
      this.error
        ? m('div.full-error', { onclick: this.fetchArticle.bind(this, vnode, this.path) }, [
            this.error, m('br'), 'Click here to try again'
          ])
        : null,
      this.data?.media_path
        ? [
            m('.player', [
              m('video', {
                crossorigin: '',
                controls: true,
                preload: 'none',
                poster: '/assets/placeholder.avif',
              }, [
                m('source', {
                  src: this.data.media_path
                })
              ]),
            ]),
          ]
        : null,
    ]
  },
}

module.exports = Article