/* global ibmVa, vajQuery*/
var prompt = document.createElement('A');
prompt.setAttribute('id', 'chatbotBtnWelcome');
prompt.setAttribute('name', 'chatbotBtnWelcome');
prompt.setAttribute('class', 'chatbotBtnWelcome');
ibmVa.appendChild(prompt);

var prompt2 = document.createElement('A');
prompt2.setAttribute('id', 'chatbotBtnHello');
prompt2.setAttribute('name', 'chatbotBtnHello');
prompt2.setAttribute('class', 'chatbotBtnHello');
ibmVa.appendChild(prompt2);

var btn = document.createElement('A');
btn.setAttribute('id', 'ibmchatbox');
btn.setAttribute('name', 'ibmchatbox');
btn.setAttribute('class', 'chatbotBtn');
btn.style.display = 'none';
ibmVa.appendChild(btn);

var chatbot = document.createElement('DIV');
chatbot.setAttribute('id', 'ibmchat');
chatbot.setAttribute('name', 'ibmchat');
chatbot.setAttribute('class', 'chatbotDiv');
chatbot.style.display = 'none';
ibmVa.appendChild(chatbot);

var loaderMain = document.createElement('DIV');
loaderMain.setAttribute('class', 'loaderMain');
loaderMain.style.display = 'none';
loaderMain.innerHTML = ' <div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>';
chatbot.appendChild(loaderMain);

var va = document.createElement('A');
va.setAttribute('id', 'vaChatbox');
va.setAttribute('name', 'vaChatbox');
chatbot.appendChild(va);

var headerBackground = document.createElement('DIV');
headerBackground.setAttribute('class', 'chatbotDivBackground');
chatbot.appendChild(headerBackground);

var header2 = document.createElement('DIV');
header2.setAttribute('class', 'chatbotDiv2');
headerBackground.appendChild(header2);

var left = document.createElement('DIV');
left.setAttribute('class', 'left');
header2.appendChild(left);

var scaleFz = document.createElement('A');
scaleFz.setAttribute('id', 'boxScaleFz');
scaleFz.setAttribute('name', 'boxScaleFz');
scaleFz.setAttribute('class', 'chatbotScaleFz');
left.appendChild(scaleFz);

var scaleFzDescription = document.createElement('A');
scaleFzDescription.setAttribute('id', 'scaleFzDescription');
scaleFzDescription.setAttribute('name', 'scaleFzDescription');
scaleFzDescription.setAttribute('class', 'chatbotScaleFzDescription');
scaleFz.appendChild(scaleFzDescription);

var center = document.createElement('DIV');
center.setAttribute('class', 'center chatbotTitle');
header2.appendChild(center);

var right = document.createElement('DIV');
right.setAttribute('class', 'right');
header2.appendChild(right);

var signOut = document.createElement('A');
signOut.setAttribute('id', 'boxSignOut');
signOut.setAttribute('name', 'boxSignOut');
signOut.setAttribute('class', 'chatbotSignOut');
right.appendChild(signOut);

var signOutDescription = document.createElement('A');
signOutDescription.setAttribute('id', 'signOutDescription');
signOutDescription.setAttribute('name', 'signOutDescription');
signOutDescription.setAttribute('class', 'chatbotSignOutDescription');
signOut.appendChild(signOutDescription);

var refresh = document.createElement('A');
refresh.setAttribute('id', 'boxRefresh');
refresh.setAttribute('name', 'boxRefresh');
refresh.setAttribute('class', 'chatbotRefresh');
right.appendChild(refresh);

var refreshDescription = document.createElement('A');
refreshDescription.setAttribute('id', 'refreshDescription');
refreshDescription.setAttribute('name', 'refreshDescription');
refreshDescription.setAttribute('class', 'chatbotRefreshDescription');
refresh.appendChild(refreshDescription);

var maximize = document.createElement('A');
maximize.setAttribute('id', 'boxMaximize');
maximize.setAttribute('name', 'boxMaximize');
maximize.setAttribute('class', 'chatbotMaximize');
right.appendChild(maximize);

var maximizeDescription = document.createElement('A');
maximizeDescription.setAttribute('id', 'maximizeDescription');
maximizeDescription.setAttribute('name', 'maximizeDescription');
maximizeDescription.setAttribute('class', 'chatbotMaximizeDescription');
maximize.appendChild(maximizeDescription);

var restore = document.createElement('A');
restore.setAttribute('id', 'boxRestore');
restore.setAttribute('name', 'boxRestore');
restore.setAttribute('class', 'chatbotRestore');
restore.style.display = 'none';
right.appendChild(restore);

var restoreDescription = document.createElement('A');
restoreDescription.setAttribute('id', 'restoreDescription');
restoreDescription.setAttribute('name', 'restoreDescription');
restoreDescription.setAttribute('class', 'chatbotRestoreDescription');
restore.appendChild(restoreDescription);

var close = document.createElement('A');
close.setAttribute('id', 'boxclose');
close.setAttribute('name', 'boxclose');
close.setAttribute('class', 'chatbotClose');

right.appendChild(close);

var closeDescription = document.createElement('A');
closeDescription.setAttribute('id', 'closeDescription');
closeDescription.setAttribute('name', 'closeDescription');
closeDescription.setAttribute('class', 'chatbotCloseDescription');
close.appendChild(closeDescription);

var stopTextServiceMsg = document.createElement('DIV');
stopTextServiceMsg.setAttribute('id', 'stopTextServiceMsg');
stopTextServiceMsg.setAttribute('name', 'stopTextServiceMsg');
stopTextServiceMsg.setAttribute('class', 'stopTextServiceMsg');
stopTextServiceMsg.setAttribute('hidden', 'true');
stopTextServiceMsg.innerHTML = '結束文字客服對談';
chatbot.appendChild(stopTextServiceMsg);

var maintainMsg = document.createElement('DIV');
maintainMsg.setAttribute('id', 'maintainMsg');
maintainMsg.setAttribute('name', 'maintainMsg');
maintainMsg.setAttribute('class', 'no-maintainMsg');
chatbot.appendChild(maintainMsg);

var ct = document.createElement('DIV');
ct.setAttribute('id', 'ctContent');
ct.setAttribute('name', 'ctContent');
ct.setAttribute('class', 'ctContent');
chatbot.appendChild(ct);

var content = document.createElement('DIV');
content.setAttribute('id', 'chatbotContent');
content.setAttribute('name', 'chatbotContent');
content.setAttribute('class', 'chatbotContent');
ct.appendChild(content);

var stopTextServiceMsgBk = document.createElement('DIV');
stopTextServiceMsgBk.setAttribute('id', 'stopTextServiceMsgBk');
stopTextServiceMsgBk.setAttribute('name', 'stopTextServiceMsgBk');
stopTextServiceMsgBk.setAttribute('class', 'no-maintainMsg');
stopTextServiceMsgBk.style.display = 'none';
content.appendChild(stopTextServiceMsgBk);

var maintainMsgBk = document.createElement('DIV');
maintainMsgBk.setAttribute('id', 'maintainMsgBk');
maintainMsgBk.setAttribute('name', 'maintainMsgBk');
maintainMsgBk.setAttribute('class', 'no-maintainMsg');
maintainMsgBk.style.visibility = 'hidden';
content.appendChild(maintainMsgBk);

var quickReply = document.createElement('DIV');
quickReply.setAttribute('id', 'quickReply');
quickReply.setAttribute('class', 'quickReply');
content.appendChild(quickReply);

var footer = document.createElement('DIV');
footer.setAttribute('class', 'chatbotFooter');
chatbot.appendChild(footer);

var infoData = '[{"channel":"default","menu":[{"icon":"userGuide","text":"隱私權保護聲明及網路安全提醒","value":"createPIPInfoModal()","type":"function","targetSelf":"","targetModal":""},{"icon":"commonFunction","text":"常用服務","value":"main_welcome1","type":"postback","targetSelf":"","targetModal":"menuCommonFunction"},{"icon":"serviceLocation","text":"服務據點","value":"尋找服務據點","type":"postback","targetSelf":"","targetModal":""}]}]';
infoData = JSON.parse(infoData);
var defaultMenu = undefined;
var menuList = undefined;
for (var i in infoData) {
    if (infoData[i].channel === sessionStorage.getItem('channel')) {
        menuList = infoData[i];
    } else if (infoData[i].channel === 'default') {
        defaultMenu = infoData[i];
    }
}
if (menuList === undefined) {
    menuList = defaultMenu;
}

let menuListHtml = '';
menuList.menu.forEach(function (element) {
    // Remove special characters
    element = JSON.parse($('<div/>').text(JSON.stringify(element)).html());
    let id = element.targetModal;
    switch (element.type) {
        case 'function':
            menuListHtml += '<li><a rel="noopener noreferrer" id="' + id + '" class="ctMenu-tab" href="javascript:' + element.value + ';"><i class="ctIcon-' + element.icon + '"></i>' + element.text + '</a></li>';
            break;
        case 'postback':
            menuListHtml += '<li><a rel="noopener noreferrer" id="' + id + '" class="ctMenu-tab" href="javascript:menuPostback(';
            menuListHtml += "'" + element.text + "','" + element.value + "');";
            menuListHtml += '"><i class="ctIcon-' + element.icon + '"></i>' + element.text + '</a></li>';
            break;
        case 'link':
            menuListHtml += '<li><a rel="noopener noreferrer" id="' + id + '" class="ctMenu-tab" href="' + element.value + '" target="_blank"><i class="ctIcon-' + element.icon + '"></i>' + element.text + '</a></li>';
            break;
        default:
            menuListHtml += '<li><a rel="noopener noreferrer" id="' + id + '" class="ctMenu-tab" ><i class="ctIcon-' + element.icon + '"></i>' + element.text + '</a></li>';
            break;
    }
});

var menuNInput = '<ul class="ctMenu-list collapse" id="cbCollapseMenu" style="overflow: hidden">' + menuListHtml + '</ul>';
menuNInput += '<div class="cbForm_group" id="cbFormGroupInputPanel">';
menuNInput += '    <!--選單及輸入框-->';
menuNInput += '    <a class="cbBtn-menu collapsed" role="button" data-toggle="collapse" href="#cbCollapseMenu" aria-expanded="false" aria-controls="cbCollapseMenu"></a>';
menuNInput += '    <div class="cbInput-wrap">';
menuNInput += '        <div class="cbInput-area">';
menuNInput += '            <input id="cbInput" name="cbInput" type="text" placeholder="請輸入你的問題" class="cbFooter2" autocomplete="off" maxlength="30">';
menuNInput += '            <input id="cbSend" name="cbSend" type="button" class="cbSend">';
menuNInput += '            <input id="cbSendGrey" name="cbSendGrey" type="button" class="cbSendGrey">';
menuNInput += '            <input id="cbSecInput" name="cbSecInput" type="password" placeholder="請輸入你的問題" class="cbFooter2" autocomplete="new-password" maxlength="1000" style="display: none;">';
menuNInput += '        </div>';
menuNInput += '    </div>';
menuNInput += '</div>';
footer.innerHTML = menuNInput;

var backDown = document.createElement('A');
backDown.setAttribute('id', 'backDown');
backDown.setAttribute('name', 'backDown');
backDown.setAttribute('class', 'backDown');
chatbot.appendChild(backDown);