const m = require('mithril')

const Page = require('../api/page.p')
const Article = require('../api/article.p')
const Pagination = require('../api/pagination')
const Pages = require('../widgets/pages')
const Newsitem = require('../widgets/newsitem')

const Frontpage = {
  oninit: function(vnode) {
    this.error = ''
    this.loading = false
    this.showLoading = null
    this.data = {
      page: null,
      articles: [],
      total_articles: 0,
      featured: null,
    }
    this.currentPage = Number(m.route.param('page')) || 1

    if (window.__nfpdata) {
      this.lastpage = this.currentPage
      window.__nfpdata = null

      if (this.articles.length === 0) {
        m.route.set('/')
      }
    } else {
      this.fetchPage(vnode)
    }
  },

  onbeforeupdate: function(vnode) {
    this.currentPage = Number(m.route.param('page')) || 1
    if (this.lastpage !== this.currentPage) {
      this.fetchPage(vnode)
    }
  },

  fetchPage: function(vnode) {
    this.error = ''
    this.lastpage = this.currentPage

    if (this.showLoading) {
      clearTimeout(this.showLoading)
    }

    this.showLoading = setTimeout(() => {
      this.showLoading = null
      this.loading = true
      m.redraw()
    }, 150)

    if (this.lastpage !== 1) {
      document.title = 'Page ' + this.lastpage + ' - NFP Moe - Anime/Manga translation group'
    } else {
      document.title = 'NFP Moe - Anime/Manga translation group'
    }

    return Page.getPage(null, this.lastpage)
    .then((result) => {
      this.data = result
    }, (err) => {
      this.error = err.message
    })
    .then(() => {
      clearTimeout(this.showLoading)
      this.showLoading = null
      this.loading = false
      m.redraw()
    })
  },

  view: function(vnode) {
    var deviceWidth = window.innerWidth
    var bannerPath = this.data.featured && this.data.featured.banner_prefix

    if (bannerPath) {
      var pixelRatio = window.devicePixelRatio || 1
      if ((deviceWidth < 720 && pixelRatio <= 1)
          || (deviceWidth < 360 && pixelRatio <= 2)) {
        bannerPath += '_small'
      } else if ((deviceWidth < 1300 && pixelRatio <= 1)
                || (deviceWidth < 650 && pixelRatio <= 2)) {
        bannerPath += '_medium'
      } else {
        bannerPath += '_large'
      }
      if (window.supportsavif) {
        bannerPath += '.avif'
      } else {
        bannerPath += '.jpg'
      }
    }

    return [
      (bannerPath
        ? m(m.route.Link, {
            class: 'frontpage-banner',
            href: '/article/' + this.data.featured.path,
            style: { 'background-image': 'url("' + bannerPath + '")' },
          },
          this.data.featured.name
        )
        : null),
      m('frontpage', [
        m('aside.sidebar', [
          m('div.categories', [
            m('h4', 'Categories'),
            m('div',
              Page.Tree.map(function(page) {
                return [
                  m(m.route.Link, { class: 'root', href: '/page/' + page.path }, page.name),
                  (page.children.length
                    ? m('ul', page.children.map(function(subpage) {
                        return m('li', m(m.route.Link, { class: 'child', href: '/page/' + subpage.path }, subpage.name))
                      }))
                    : null),
                ]
              })
            ),
          ]),
          m('div.asunaside', {
            class: window.supportsavif ? 'avif' : 'jpeg'
          }),
        ]),
        m('.frontpage-news', [
          (this.loading
            ? m('div.loading-spinner')
            : null),
          this.data.articles.map(function(article) {
            return m(Newsitem, { article: article })
          }),
          m(Pages, {
            base: '/',
            total: this.data.total_articles,
            page: this.currentPage,
          }),
        ]),
      ]),
    ]
  },
}

module.exports = Frontpage