let m = require('mithril')
let fecha = require('fecha')
let user = require('../models/user')
let Loading = require('./Loading')

var userProfile = {
    changePassword: false,
    oninit: function(vnode) {
        user.current = {}
        user.loadCurrent(vnode.attrs.id)
    },
    oncreate: function() {
        userProfile.changePassword = false
    },
    view: function() {
        return m('main.documentation', m('section', [
            user.loading ? m(Loading) :
            m('form', {
                onsubmit: function(e) {
                    e.preventDefault()
                    user.editProfile()
                }
            }, [
                m('h1', m('input', {
                    type: 'text',
                    required: 'required',
                    placeholder: 'Nama Lengkap',
                    value: user.current.full_name,
                    onclick: function() {
                        user.current.full_name = ''
                    },
                    oninput: m.withAttr('value', function(value) {
                        user.current.full_name = value
                    })
                })),
                m('table.full', [
                    m('tr.full', [
                        m('td', 'Username'),
                        m('td', ':'),
                        m('td', user.current.username)
                    ]),
                    m('tr', [
                        m('td', 'Password'),
                        m('td', ':'),
                        m('td', [
                            m('input.full.noTrans#nPwd', {
                                type: 'password',
                                required: 'required',
                                placeholder: 'Password Baru',
                                value: user.current.new_password,
                                onclick: function() {
                                    user.current.new_password = ''
                                    this.className = 'third noTrans'
                                    userProfile.changePassword = true
                                },
                                oninput: m.withAttr('value', function(value) {
                                    user.current.new_password = value
                                })
                            }),
                            userProfile.changePassword ? [
                                m('input.third#oPwd', {
                                    type: 'password',
                                    required: 'required',
                                    placeholder: 'Password Lama',
                                    oninput: m.withAttr('value', function(value) {
                                        user.current.old_password = value
                                    })
                                }),
                                m('input.third#rNPwd', {
                                    type: 'password',
                                    required: 'required',
                                    placeholder: 'Ulang Password Baru',
                                    oninput: m.withAttr('value', function(value) {
                                        user.current.re_new_password = value
                                    })
                                })
                            ] : null
                        ])
                    ]),
                    m('tr', [
                        m('td', 'Hak Akses'),
                        m('td', ':'),
                        m('td', user.current.privilege == 1 ? 'Admin' : 'User')
                    ]),
                    m('tr', [
                        m('td', 'Registrasi'),
                        m('td', ':'),
                        m('td', fecha.format(new Date(user.current.registered_at), 'YYYY-MM-DD'))
                    ])
                ]),
                m('button.full.pseudo', {
                    type: 'submit',
                }, [
                    m('i.fa.fa-check-square-o', {
                        'aria-hidden': 'true'
                    }),
                    m('span', {
                        style: 'font-size: smaller;'
                    }, ' Simpan')
                ])
            ])
        ]))
    }
}

module.exports = userProfile