let m = require('mithril')
let swiper = require('swiper')
let _ = require('lodash')
require('../../node_modules/swiper/dist/css/swiper.css')

let marked = require('./vendor/marked.js')

var root = document.getElementById('nouser')

const getPageData = function() {
    m.request({
        method: 'GET',
        url: '/api/posts',
        background: false
    })
    .then(function(res) {
        if (!_.isEqual(res['data'], images.list)) {
            images.list = res['data']
            m.mount(root, null)
            m.mount(root, images)
        }
    })
}

var images = {
    oninit: getPageData,
    oncreate: function() {
        setTimeout(function() {
            var imgSwiper = new swiper('.swiper-container', {
                speed: 500,
                autoplay: 5000,
                autoplayDisableOnInteraction: false,
                loop: true,
                onTransitionEnd: function(imgSwiper) {
                    getPageData()
                }
            })
        }, 500)
    },
    list: [],
    view: function() {
        return m('.swiper-container', {
        }, [
            m('.swiper-wrapper', [
                images.list.map(function(item) {
                    return m('.swiper-slide.fitty', {
                        "data-swiper-autoplay": item.delay,
                        style: "background-color:" + item.background + "; color:" + item.foreground + "; padding: 15vh 0;"
                    }, m.trust(marked(item.content)))
                })
            ])
        ])
    }
}

m.mount(root, images)