let m = require('mithril')
let _ = require('lodash')
let category = require('../models/category')
let nav = require('./nav')
let Loading = require('./Loading')

var createCategory = {
    oninit: function() {
        category.loadList()
    },
    current: [],
    view: function() {
        return m('main.documentation', m('section', [
            m('h1', 'Kategori'),
            category.loading ? m(Loading) :
            m('.flex.two-600.full.grow', [
                m('div', m('form', {
                    onsubmit: function(e) {
                        e.preventDefault()
                        category.entry()
                    }
                }, [
                    m('h2', 'Tambah Kategori'),
                    m('.flex.three-600.two.grow', [
                        m('.third-600.full', m('label', {for: 'category'}, 'Nama')),
                        m('.two-third-600.full', m('input', {
                            type: 'text',
                            name: 'category',
                            autocomplete: 'off',
                            oninput: m.withAttr('value', function(value) {
                                category.current.category = value
                            }),
                            value: _.isString(category.current.category) ? category.current.category : ''
                        })),
                        m('.third-600.full', m('label', {for: 'background'}, 'Background')),
                        m('.two-third-600.full', m('input', {
                            type: 'color',
                            name: 'background',
                            oninput: m.withAttr('value', function(value) {
                                category.current.background = value
                            }),
                            value: _.isString(category.current.background) ? category.current.background : ''
                        })),
                        m('.third-600.full', m('label', {for: 'foreground'}, 'Teks')),
                        m('.two-third-600.full', m('input', {
                            type: 'color',
                            name: 'foreground',
                            oninput: m.withAttr('value', function(value) {
                                category.current.foreground = value
                            }),
                            value: _.isString(category.current.foreground) ? category.current.foreground : ''
                        })),
                        m('button.pseudo.full', {
                            type: 'submit'
                        }, [
                            m('i.fa.fa-plus.fa-fw', {
                                'aria-hidden': 'true'
                            }),
                            m('span', 'Tambah')
                        ])
                    ])
                ])),
                m('div', [
                    m('h2', 'List'),
                    m('ul', {
                        style: 'margin-top:0;'
                    }, category.list.map(function(cat) {
                        return m('li', [
                            m('div', {
                                style: 'height: initial; text-align: center; border-radius: 5px; background-color: ' + cat.background + '; color: ' + cat.foreground + ';'
                            }, m('span', cat.category)),
                            m('.flex.two-600.full.grow', {
                                style: 'margin: 0;'
                            }, [
                                m('div', m('a.pseudo.button.full', {
                                    href: '/kategori/' + cat.id,
                                    oncreate: m.route.link
                                }, [
                                    m('i.fa.fa-edit.fa-fw'),
                                    m('span', {
                                        style: 'font-size: smaller'
                                    }, 'Ubah')
                                ])),
                                m('div', m('button.pseudo.full', {
                                    style: 'height: inherit',
                                    onclick: function() {
                                        category.toggleStatus(cat.id)
                                    }
                                }, [
                                    m('i.fa.fa-fw', {
                                        class: (cat.status == 1) ? 'fa-times-circle-o' : 'fa-check'
                                    }),
                                    m('span', {
                                        style: 'font-size: smaller;'
                                    }, (cat.status == 1) ? 'Matikan' : 'Aktifkan')
                                ]))
                            ]),
                            m('.fourth-600.none')
                        ])
                    }))
                ])
            ])
        ]))
    }
}

module.exports = createCategory