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

const Article = {
  oninit: function(vnode) {
    Authentication.requiresLogin()
    this.error = ''
    this.path = ''
    this.data = null
    this.editing = false
    this.form = {
      title: 'Sunnudagssamkoma',
      date: new Date(),
      banner: null,
      metadata: {
        speaker: '',
      },
    }
    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.gotArticle(vnode)
    }, (err) => {
      this.error = err.message
    })
  },

  gotArticle: function(vnode) {
    if (!this.data) {
      return this.error = 'Article not found'
    }
    this.form.title = this.data.name
    this.form.date = new Date(this.data.publish_at)
    this.form.banner = this.data.banner_path
    this.form.metadata.speaker = this.data.content.speaker
  },

  updatevideo: function(vnode, e) {
    this.error = ''
    if (this.error) return false
  },

  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: this.data.banner_path || '/assets/placeholder.avif',
              }, [
                m('source', {
                  src: this.data.media_path
                })
              ]),
            ]),
          ]
        : null,
      this.editing
        ? m('form.article', {
            onsubmit: this.updatevideo.bind(this, vnode),
          }, [
            m('div.form-row', [
              m('div.form-columns', [
                m(Input, {
                  label: 'Mynd',
                  type: 'file',
                  accept: 'image/*',
                  utility: 'image',
                  form: this.form,
                  formKey: 'banner',
                }),
              ]),
              m('div.form-columns', [
                m(Input, {
                  label: 'Title',
                  form: this.form,
                  formKey: 'title',
                }),
                m(Input, {
                  label: 'Date (dd.mm.yyyy)',
                  type: 'text',
                  utility: 'datetime',
                  form: this.form,
                  formKey: 'date',
                }),
              ]),
            ]),
            m('p.separator', 'Optional'),
            m(Input, {
              label: 'Speaker',
              form: this.form.metadata,
              formKey: 'speaker',
            }),
          ])
        : m('div.article', [
            m('h1', this.data.name)
          ]),
    ]
  },
}

module.exports = Article