const blessed = require('blessed'),
      contrib = require('blessed-contrib'),
      renderScreen = require('../screen-renderer'),
      auto = true;

module.exports = (screen, stream, user) => {
    var contentArea = blessed.box({
        top: auto,
        width: 'shrink',
        content: 'Welcome to #! account creation page.\nUse arrow keys to move up/down the fields. Use Return to change/insert text. Use Esc to exit after you have finished entering your text.',
        height: '100%-4',
        padding: 1,
        scrollable: true,
        keys: true,
        vi: true,
        alwaysScroll: true,
        scrollbar: {
            bg: 'blue',
            fg: 'red'
        }
    });

    // Main form elements
    var form = blessed.form({
        parent: contentArea,
        inputOnFocus: true,
        keys: true,
        left: 0,
        top: 4,
        height: '100%-6',
        width: '100%-1',
        vi: true
    });

    var userNameLabel = blessed.text({
        parent: form,
        content: 'Username:',
        top: 0
    });

    var username = blessed.textbox({
        parent: form,
        name: 'username',
        value: user.name,
        input: true,
        keys: true,
        top: 0,
        left: 12,
        height: 1,
        width: '80%',
        style: {
            fg: 'white',
            bg: 'black',
            focus: {
                bg: 'red',
                fg: 'white'
            }
        }
    });

    var userNameDescription = blessed.text({
        parent: form,
        content: 'Your username is your unique identifier. You\'ll use this to login to #! account and receive mail',
        left: 12,
        top: 1
    });

    var sshKeyLabel = blessed.text({
        parent: form,
        content: 'SSH Key:',
        top: 4
    });


    var sshKey = blessed.textarea({
        parent: form,
        name: 'ssh_keys',
        value: user.keys[0],
        input: true,
        keys: true,
        top: 4,
        left: 12,
        width: '80%',
        height: '100%-8',
        style: {
            fg: 'white',
            bg: 'black',
            focus: {
                bg: 'red',
                fg: 'white'
            }
        }
    });

    var sshKeyDescription = blessed.text({
        parent: form,
        content: 'This SSH key is used to setup passwordless authentication to #! shell servers. You can always add more SSH keys using hashbangctl tool from #! shell.',
        left: 12,
        top: '100%-4'
    });

    screen.append(contentArea);
    form.focus();
};

@@ -326,19 +326,21 @@
  page.%5Cn
-Use
+Press
  arrow k
@@ -371,19 +371,21 @@
 fields. 
-Use
+Press
  Return 
@@ -407,19 +407,21 @@
 t text. 
-Use
+Press
  Esc to 
@@ -429,50 +429,85 @@
 xit 
-after you have finished
+the field. Press Ctrl+s to submit the form after you%5C've
  enter
-ing
+ed
  your 
-text
+details
 .',%0A
@@ -885,33 +885,33 @@
 0,%0A        top: 
-4
+6
 ,%0A        height
@@ -918,17 +918,17 @@
 : '100%25-
-6
+8
 ',%0A     
@@ -2576,12 +2576,196 @@
 focus();
+%0A%0A    form.on('submit', (data) =%3E %7B%0A        renderScreen(screen, stream, 'account-review', data);%0A    %7D);%0A%0A%0A    screen.key(%5B'C-y', 'C-s'%5D, (ch, key) =%3E %7B%0A        form.submit();%0A    %7D);
 %0A%7D;%0A

send form data to account review page