const m = require('mithril')
const api = require('./api')
const PageTree = require('./page_tree')
const Paginator = require('./paginator')
// const Authentication = require('./authentication')
const Article = require('./article')
const Articleslim = require('./article_slim')
const media = require('./media')
const EditorBlock = require('./editorblock')
const NotFoundView = require('./site_404')

const ArticlesPerPage = 10

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

    if (window.__nfpdata) {
      this.path = m.route.param('id')
      this.lastpage = this.currentPage

      this.data = window.__nfpdata
      window.__nfpdata = null

      this.children = PageTree.Tree
      if (this.path) {
        this.children = PageTree.TreeMap.get(this.path)
        this.children = this.children && this.children.children || []
      }
      this.afterData()
    } else {
      this.fetchPage(vnode)
    }
  },

  onbeforeupdate: function(vnode) {
    this.currentPage = Number(m.route.param('page')) || 1

    if (this.path !== m.route.param('id') || this.currentPage !== this.lastpage) {
      this.fetchPage(vnode)
    }
  },

  fetchPage: function(vnode) {
    this.error = ''
    this.lastpage = this.currentPage
    this.path = m.route.param('id')

    this.loading = true

    if (this.path) {
      this.treePage = PageTree.TreeMap.get(this.path)
      this.children = this.treePage && this.treePage.children || []
    } else {
      this.treePage = { has_banner: true, has_media: true }
      this.children = PageTree.Tree
    }

    api.sendRequest({
      method: 'GET',
      url: '/api/' + (this.path ? 'pages/' + this.path : 'frontpage') + '?page=' + (this.lastpage || 1),
    })
    .then((result) => {
      this.data = result
      this.afterData()
    }, (err) => {
      this.error = err.message
    })
    .then(() => {
      this.loading = false
      m.redraw()
    })
  },

  afterData: function() {
    if (!this.data.page && this.path) {
      this.error = 'Page not found'
      return
    }

    let title = 'Page not found - NFP Moe - Anime/Manga translation group'
    if (this.data.page) {
      title = this.data.page.name + ' - NFP Moe'
    } else if (!this.path) {
      title = 'NFP Moe - Anime/Manga translation group'
    }

    this.picture = media.generatePictureSource(this.data.page,
      '(max-width: 1280px) calc(100vw - 2rem), '
      + '1248px')

    if (this.lastpage !== 1) {
      document.title = 'Page ' + this.lastpage + ' - ' + title
    } else {
      document.title = title
    }
  },

  view: function(vnode) {
    let page = this.data.page
    let featuredBanner = media.getBannerImage(this.data.featured, '/article/')
    let pageBanner = media.getBannerImage(this.data.page, '/page/')

    return ([
      this.loading
        ? [
            this.treePage.has_banner
              ? m('div.page-banner.lb')
              : null,
            this.path
              ? m('div.inside.vertical', [
                  m('div.actions', m('div.lb-link')),
                  m('h2.title', m('div.lb-main.lb--long')),
                ])
              : null,
            m('div.inside', [
              this.children.length
                ? m('aside', [
                    m('h5', m('div.lb-main')),
                    m('div.lb-link'),
                    m('ul', [
                      m('li', m('div.lb-link')),
                      m('li', m('div.lb-link')),
                      m('li', m('div.lb-link')),
                    ]),
                    m('div.lb-link'),
                    m('ul', [
                      m('li', m('div.lb-link')),
                      m('li', m('div.lb-link')),
                      m('li', m('div.lb-link')),
                    ]),
                  ])
                : null,
              !this.path
                ? m('div.container', [
                    m('article', [
                      m('h2.title', m('div.lb-main.lb--long')),
                      m('div.row', [
                        m('div.lb-main.lb--imgmini'),
                        m('div', [
                          m('div', m.trust(' ')),
                          m('div.lb-main.lb--long'),
                          m('div.lb-main'),
                          m('div.lb-main.lb--medium'),
                          m('div.lb-main.lb--medium'),
                          m('div.lb-main'),
                        ]),
                      ]),
                    ]),
                    m('article', [
                      m('h2.title', m('div.lb-main.lb--long')),
                      m('div.row', [
                        m('div.lb-main.lb--imgmini'),
                        m('div', [
                          m('div', m.trust(' ')),
                          m('div.lb-main.lb--long'),
                          m('div.lb-main'),
                          m('div.lb-main.lb--medium'),
                          m('div.lb-main.lb--medium'),
                          m('div.lb-main'),
                        ]),
                      ]),
                    ]),
                  ])
                : null,
              this.path
                ? m('div.container', [
                    this.treePage.has_media
                      ? m('div.cover', m('picture.lb.nobg'))
                      : null,
                    m('h5', m('div.lb-main.lb--long')),
                    m('articleslim', [
                      m('a.cover.nobg.lb'),
                      m('div', [
                        m('div', m('div.lb-link.lb--long')),
                        m('div.lb-main.lb--longest.lb--slim'),
                      ]),
                    ]),
                    m('articleslim', [
                      m('a.cover.nobg.lb'),
                      m('div', [
                        m('div', m('div.lb-link.lb--long')),
                        m('div.lb-main.lb--longest.lb--slim'),
                      ]),
                    ]),
                    m('articleslim', [
                      m('a.cover.nobg.lb'),
                      m('div', [
                        m('div', m('div.lb-link.lb--long')),
                        m('div.lb-main.lb--longest.lb--slim'),
                      ]),
                    ]),
                    m('articleslim', [
                      m('a.cover.nobg.lb'),
                      m('div', [
                        m('div', m('div.lb-link.lb--long')),
                        m('div.lb-main.lb--longest.lb--slim'),
                      ]),
                    ]),
                  ])
                : null,
            ]),
          ]
        : [
          this.error === 'Page not found'
            ? NotFoundView.view()
            : null,
          this.error && this.error !== 'Page not found'
            ? m('div.wrapper', m('div.error', {
                onclick: () => {
                  this.error = ''
                  this.fetchPage(vnode)
                },
              }, 'Page error: ' + this.error + '. Click here to try again'))
            : null,
          (featuredBanner
            ? m(m.route.Link, {
                class: 'page-banner',
                href: featuredBanner.path,
                style: window.supportsavif ? { 'background-image': 'url("' + featuredBanner.preview + '")' } : null,
              }, [
                m('div.page-banner-real', {
                  style: { 'background-image': 'url("' + featuredBanner.banner + '")' },
                }, m('div.inside', m('div.page-banner-title', featuredBanner.name))),
              ]
            )
            : null),
          (!featuredBanner && pageBanner
            ? m('a.page-banner', {
                href: pageBanner.original,
                target: '_blank',
                style: window.supportsavif ? { 'background-image': 'url("' + pageBanner.preview + '")' } : null,
              },
              m('div.page-banner-real', {
                style: { 'background-image': 'url("' + pageBanner.banner + '")' },
              })
            )
            : null),
          (page
            ? m('.inside.vertical', [
                m('div.actions', [
                  '« ',
                  m(m.route.Link, {
                    href: page.parent_path
                      ? '/page/' + page.parent_path
                      : '/'
                    }, page.parent_name || 'Home'),
                  Authentication.currentUser
                    ? [
                        m('div.filler'),
                        'Actions:',
                        m(m.route.Link, { href: '/admin/pages/' + page.id }, 'Edit page'),
                      ]
                    : null,
                ]),
                m('h2.title', page.name)
              ])
            : null),
          (page || this.data.articles.length
            ? m('.inside', [
                this.children.length
                  ? m('aside', { class: page ? '' : 'frontpage' }, [
                      m('h5', page ? 'View ' + page.name + ':' : 'Categories'),
                      this.children.map((page) => {
                        return [
                          m(m.route.Link, { class: 'root', href: '/page/' + page.path }, page.name),
                          (page.children && 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),
                        ]
                      }),
                      !page
                        ? m('div.asuna.spritesheet')
                        : null,
                    ])
                  : null,
                m('div.container', [
                  (page
                    ? media.getArticlePicture(this.picture, false, page.media_path, 'Image for page ' + page.name)
                    : null),
                  (page && page.content
                    ? m('div.content', page.content.blocks.map(block => {
                        return m(EditorBlock, { block: block })
                      }))
                    : null),
                  (page && this.data.articles.length
                    ? [
                        m('h5', 'Latest posts under ' + page.name + ':'),
                        this.data.articles.map(function(article) {
                          return m(Articleslim, { article: article })
                        }),
                      ]
                    : null),
                  (!page && this.data.articles.length
                    ? this.data.articles.map(function(article) {
                        return m(Article, { article: article })
                      })
                    : null),
                  m(Paginator, {
                    base: page ? '/page/' + page.path : '/',
                    page: this.currentPage,
                    perPage: ArticlesPerPage,
                    total: this.data.total_articles,
                  }),
                ]),
              ])
            : null),
          ],
    ])
  },
}

module.exports = SitePage