var ns = ns || { SenderForm: "" };
import { setItemToSessionStore, getItemFromSessionStore } from "../../../../../templates/base/SessionStorageHelper.js";
import { chatBot } from "../../../../../templates/base/memberinitialbase.js";



chatBot.cdnHost = "https://azapp-botapi-prod.azurewebsites.net/";
chatBot.openChatOnStart = false;
chatBot.claimantRegistrationForm = 'wfmClaimantContinueRegistrationMaintenance';
chatBot.employerRegistrationForm = 'wfmEmployerRegistrationMaintenance';

chatBot.chatObject = JSON.parse(sessionStorage.getItem("chatBot__chatObject"));
if (chatBot.chatObject === null || chatBot.chatObject === undefined)
    chatBot.chatObject = { 'corrId': '1653d9b3-4acd-4b17-b79b-5069322275c6', 'userRole': 'g', 'astrBotCode': 'ba64b08d-e709-42d2-afbd-95b0f45b54d6' };

chatBot.chatHeaderImage = 'templates/assests/images/dew-sc.png';

chatBot.RegisterUIRelatedEvents = function () {
    // Create IE + others compatible event handler
    // Listen to message from child window
    window.addEventListener('message', function (e) {
        if (e.data === "toggle") {
            //If document is hidden play the beep sound
            if (!document.hasFocus()) {
                chatBot.controls.chatBotBeep.play();
            }
            chatBot.blink();
        }
        if (e.data === "connected") {
            chatBot.hideLoader();
            chatBot.controls.chatBotBeep.play();
            if (chatBot.controls.chatBotWebChatContainer.style.visibility != 'visible')
                chatBot.controls.chatBotWebChatContainer.style.visibility = 'visible';
        }
        //    //begin - for agent. If no agent, comment these lines
        //    if (e.data === "requestSent") {
        //        //chatBot.chatdivoriginal();
        //        chatBot.controls.chatBotConnectedMessageBanner.style.display = 'none';
        //        chatBot.controls.chatBotRequestMessageBanner.style.display = 'block';
        //    }
        //    if (e.data === "agentConnect") {
        //        //chatBot.chatdivoriginal();
        //        chatBot.controls.chatBotConnectedMessageBanner.style.display = 'block';
        //        chatBot.controls.chatBotRequestMessageBanner.style.display = 'none';
        //        chatBot.controls.chatBotEndChat.style.visibility = 'visible';
        //    }
        //    if (e.data === "agentDisconnect") {
        //        //chatBot.chatdivfull();
        //        chatBot.controls.chatBotConnectedMessageBanner.style.display = 'none';
        //        chatBot.controls.chatBotRequestMessageBanner.style.display = 'none';
        //        chatBot.controls.chatBotEndChat.style.visibility = 'hidden';
        //    }
        //end - for agent
        if (e.data === "restartChat") {
            chatBot.hideLoader();
        }
        if (e.data === "CONNECT_FULFILLED") {
            //show iframe
            chatBot.controls.chatBotWebChatContainer.style.visibility = 'visible';
        }
    }, false);

    chatBot.controls.chatBotFormContainer = document.getElementById('chatBotProfileTemplate');
    chatBot.controls.chatBotProfileForm = document.getElementById('botProfileForm');
    chatBot.controls.chatBotProfileForm.addEventListener("submit", chatBot.validateProfile);
}

chatBot.validateProfile = function () {
    console.log("validateProfile");
    var name = document.forms['botProfileForm']['name'].value;
    var email = document.forms['botProfileForm']['email'].value;
    var benefitType = document.forms['botProfileForm']['benefitType'].value;
    if (name === '' || email === '' || benefitType === '') {
        alert("Please fill all the profile values");
        return;
    } else {

        chatBot.chatObject.astrUserName = name + ' (G)';
        chatBot.chatObject.astrUserSerialId = email;
        chatBot.chatObject.kbType = benefitType;
        setItemToSessionStore("chatBot__chatObject", chatBot.chatObject, true);
        chatBot.loadChatWindow();
    }

}

chatBot.start = function () {
    //The event binding of the wizard buttons should be done only when the DOM is loaded.
    chatBot.refreshButton = document.getElementById("btnExecuteRefreshFromObject");
    chatBot.nextButton = document.getElementById("btnNextForm");


    //if (ns !== undefined && ns.SenderForm !== undefined) {
    //    if (ns.SenderForm === chatBot.claimantRegistrationForm) {
    //        chatBot.refreshButton.addEventListener("click", function () {
    //            setTimeout(chatBot.start, 7000);
    //        });
    //        return;
    //    }
    //    else if (ns.SenderForm === chatBot.employerRegistrationForm) {
    //        chatBot.nextButton.addEventListener("click", function () {
    //            setTimeout(chatBot.start, 7000);
    //        });
    //        return;
    //    }
    //    else {

    //Appending the style sheet.
    var memberStyleSheet = document.createElement('link');
    memberStyleSheet.href = chatBot.cdnHost + chatBot.styles + chatBot.chatObject.astrBotCode + '.css';
    memberStyleSheet.rel = 'stylesheet';
    document.head.appendChild(memberStyleSheet);

    chatBot.template = "<form id='botProfileForm' action='javascript:void(0);' onsubmit='chatBot.validateProfile()' method='post'><h4>Hello, I'm the South Carolina Department of Workforce's Virtual Assistant.</h4><p>I can help answer the most common questions about 'claimant or self employed' and 'employer or an agent'.</p><p>Any time during the chat, type <strong>reset</strong> to change between context of 'claimant or self employed' and 'employer or an agent'</p><input autocomplete='off' placeholder='Name' required type='text' name='name'><input autocomplete='off' placeholder='Email' required type='email' name='email'><select name='benefitType'><option value='BNFT'>I am a claimant or self employed</option><option value='TAX'>I am an employer or agent</option></select><button>Submit</button></form>"; //`<form id='botProfileForm' action='javascript: void (0);  method='post'><h4>Hello, I'm the South Carolina Department of Workforce's Virtual Assistant.</h4><p>I can help answer the most common questions about 'claimant or self employed' and 'employer or an agent'.</p><p>Any time during the chat, type <strong>reset</strong> to change between context of 'claimant or self employed' and 'employer or an agent'</p><input autocomplete='off' placeholder='Name' required type='text' name='name' value='kannan'><input autocomplete='off' placeholder='Email' required type='email' name='email' value='kannan.s@sagitec.com'><select name='benefitType'><option value='BNFT'>I am a claimant or self employed</option><option value='TAX'>I am an employer or agent</option></select><button>Submit</button></form>`

    chatBot.chatIconHtml = `<audio id='chatBotBeep' src=${chatBot.cdnHost}${chatBot.audioCdn} autostart='false' ></audio >
                                        <div id='chatBotIconContainer' title='Chat' class='animated-chat tada'><div id='chatBotMsgCounter' style='display:none'>0</div>
                                            <img id='chatBotIconImage' src=${chatBot.cdnHost}${chatBot.chatIcon} alt='Chat' />
                                        </div>`;
    chatBot.chatWindowHtml = `<div id="chatBotWindowContainer" aria-hidden="true">
                                            <div id='chatBotHeaderContainer'>
                                                 <div class="headerimagediv"> 
                                                 <img id='chatBotHeaderImage' src=${chatBot.cdnHost}${chatBot.chatHeaderImage}></img>
                                                </div>
                                                 <div class="headertitlediv" ><h2><span id="chatBotHeaderText">DEW CHAT<span></h2></div>
                                                 <div class="headersizediv">
                                                 <div class="headersizecontent"> 
                                                 <img id='chatBotResizeIcon' style="display:none" src=${chatBot.cdnHost}${chatBot.resizeIcon} alt='Resize Chat Window'/>
                                                <img id='chatBotMaximizeIcon' src=${chatBot.cdnHost}${chatBot.maximizeIcon} alt='Maximize Chat Window'/>
                                                <img id='chatBotMinimizeIcon' src=${chatBot.cdnHost}${chatBot.minimizeIcon} alt='Minimize Chat'/>
                                                 </div> 
                                                </div>
                                             </div>
                                           <div id='chatBotLoader' class="chatDisable">
                                               <img id='chatBotLoaderImage' class='imgbottomfab' src=${chatBot.cdnHost}${chatBot.loadingIcon}></img>
                                           </div>
                                           <div id='chatBotBodyContainer'>
                                                <div id='chatBotConnectedMessageBanner' style='display:none' class='chat-banner'><span style='position:relative;top: 5px;color: #fff;'>You are now connected.</span> 
                                                    <img id='chatBotEndChat' src='${chatBot.cdnHost}${chatBot.closeIcon}' alt='End Conversation' width='16' />
                                                </div> 
                                               <div id='chatBotRequestMessageBanner' style='display:none' class='chat-banner'><span style='position:relative;top: 5px;color: #fff;'>Request Pending.</span>
                                                    <img id='chatBotEndAssist' src='${chatBot.cdnHost}${chatBot.closeIcon}' title='End Request' width='16' />
                                                </div>
                                                <div id='chatBotProfileTemplate' style="display:none">${chatBot.template}</div>
                                                
                                                <iframe id='chatBotWebChatContainer' allow='microphone;' src='' style='visibility: hidden;'class='chatbotiframe'></iframe>
                                                 
                                             </div>
                                         
                                      </div>`;

    chatBot.initiateChat();
}
//}

export { chatBot }
setTimeout(chatBot.start, 5000);