const BinarySocket = require('../../../../base/socket');
const Client = require('../../../../base/client');
const FormManager  = require('../../../../common/form_manager');
const QRCode = require('./../../../../../../../node_modules/davidshimjs-qrcodejs/qrcode');
const localize     = require('../../../../../_common/localize').localize;
const getPropertyValue = require('../../../../../_common/utility').getPropertyValue;

// TODO:
// 1. Setup library
// 2. Error handling
// 3. state handling
// 4. ui
// tooltip to form?

const TwoFactorAuthentication = (() => {
    let enabled_state,
        next_state,
        qrcode;
    // loader
    const onLoad = () => {
        // initialize form
        init();
    };

    const init = () => {
        BinarySocket.send({ account_security: 1, totp_action: 'status'}).then((res) => {
            // TODO: handle error
            enabled_state = res.account_security.totp.is_enabled ? 'enabled' : 'disabled';
            next_state = res.account_security.totp.is_enabled ? 'disable' : 'enable';
            const form_id = '#frm_two_factor_auth';

            $('#two_factor_loading').remove();
            $(`#${enabled_state}`).setVisibility(1);
            $('#btn_submit').text(next_state);
            $(form_id).setVisibility(1);

            FormManager.init(form_id, [
                { selector: '#otp', validations: ['req'], request_field: 'otp' },
                { request_field: 'account_security', value: 1 },
                { request_field: 'totp_action', value: next_state },
            ]);
            FormManager.handleSubmit({
                form_selector       : form_id,
                fnc_response_handler: handler,
                enable_button       : true,
            });

            if (enabled_state === 'disabled') {
                initQRCode();
            }
        });
    };

    const initQRCode = () => {
        BinarySocket.send({ account_security: 1, totp_action: 'generate'}).then((res) => {
            // TODO: handle error
            $('#qrcode_loading').setVisibility(0);
            makeQrCode(res.account_security.totp.secret_key);
        });
    };

    const makeQrCode = (key) => {
        const otpAuth = `otpauth://totp/${Client.get('email')}?secret=${key}&issuer=Binary.com`;
        qrcode = new QRCode(document.getElementById('qrcode'), {
            text  : otpAuth,
            width : 130,
            height: 130,
        });
        console.log(qrcode);
    };

    const handler = (res) => {
        console.log('handler: ', res);
        if ('error' in res) {
            showFormMessage(getPropertyValue(res, ['error', 'message']) || 'Sorry, an error occurred.');
        } else {
            showFormMessage(`You have successfully ${next_state}d two-factor authentication for your account`, true);
        }
    };

    const showFormMessage = (msg, is_success) => {
        $('#form_message')
            .attr('class', is_success ? 'success-msg' : 'error-msg')
            .html(is_success ? $('<ul/>', { class: 'checked' }).append($('<li/>', { text: localize(msg) })) : localize(msg))
            .css('display', 'block')
            .delay(5000)
            .fadeOut(1000);
    };

    return {
        onLoad,
    };
})();

module.exports = TwoFactorAuthentication;

@@ -1,12 +1,56 @@
+import QRCode from 'davidshimjs-qrcodejs';%0A%0A
 const Binary
@@ -214,99 +214,8 @@
 ');%0A
-const QRCode = require('./../../../../../../../node_modules/davidshimjs-qrcodejs/qrcode');%0A
 cons
@@ -388,28 +388,8 @@
 / 1.
- Setup library%0A// 2.
  Err
@@ -407,53 +407,56 @@
 %0A// 
-3. state handling%0A// 4. ui%0A// tooltip to form
+2. ui%0A// 3. tooltip to form?%0A// 4. after success
 ?%0A%0Ac
@@ -553,16 +553,40 @@
  qrcode;
+ // eslint-disable-line 
 %0A    // 
@@ -776,32 +776,79 @@
 then((res) =%3E %7B%0A
+            $('#two_factor_loading').remove();%0A
             // T
@@ -856,32 +856,33 @@
 DO: handle error
+?
 %0A            ena
@@ -1100,55 +1100,8 @@
 ';%0A%0A
-            $('#two_factor_loading').remove();%0A
     
@@ -1971,16 +1971,17 @@
 le error
+?
 %0A       
@@ -2397,37 +2397,8 @@
 %7D);%0A
-        console.log(qrcode);%0A
     
@@ -2436,47 +2436,8 @@
 %3E %7B%0A
-        console.log('handler: ', res);%0A
     

refactor + remove clg statements