import m from 'mithril';

import Form from './form';

const Profile = {
  controller(props) {
    const profile = {
      username: m.prop('bob'),
      password: m.prop(''),
      displayEmail: m.prop(false),
      age: m.prop(21.5),
      bio: m.prop(''),
    };

    return {
      profile
    }
  },

  view (ctrl, props) {
    const { profile } = ctrl;

    return m('.profile', [
      m(Form, {data: profile, action: '/profile' }, [
        m('input', {name: 'username', placeholder: 'username', value: profile.username()}),
        m('input', {type: 'password', name: 'password', placeholder: 'password', value: profile.password()}),
        m('input', {name: 'age', placeholder: 'age', value: profile.age(), format: 'float:2'}),
        m('textarea', {name: 'bio'}, profile.bio()),
        m('span', 'Display Email?'),
        m('input', {name: 'displayEmail', type: 'checkbox'}),
        m('button', 'Submit')
      ])
    ]);
  }
}

export default Profile;