(()=>{

  let dermObj = dml_dmlqz;

  if (window.location.search.indexOf("forced_lang=") >-1 ){
    dermObj.forced_lang = window.location.search.split("forced_lang=")[1].split("&")[0];
  }


  dermObj.body = document.getElementById(`dmlqz_body`);

  (()=>{


  dermObj.sendGAFlowEvent = (actionString) => {
    const eventParameters = {
      user_flow : actionString,
      page_location: window.location.hostname,
      page_path: window.location.pathname,
      page_title: dermObj.currentPage
    }
    dermObj.sendGA("flow",eventParameters);
  }

  dermObj.sendGAUserClickEvent = (actionString) => {
    const eventParameters = {
      user_click : actionString,
      page_location: window.location.hostname,
      page_path: window.location.pathname,
      page_title: dermObj.currentPage
    }
    dermObj.sendGA("user_click",eventParameters);
  }

  dermObj.addClickEventsToButtons = () => {
    document.querySelectorAll('button').forEach((button) => {
      if (button.id){
        button.addEventListener('click',()=>{
          dermObj.sendGAUserClickEvent(button.id)
        })
      }
    })

    /* adding exta event listeners for other elements example

    try{
      document.getElementById("srs_results_hamburger_menu_mobile").addEventListener('click',()=>{
        dermObj.sendGAUserClickEvent('srs_results_hamburger_menu_mobile')
      })
    }catch(err){console.error(err)}
    */




  }
})();

  (()=>{

  dermObj.getLanguageData = ()=>{

    return new Promise((resolve, reject)=>{

      if (dml_dmlqz.forced_lang){
        dermObj.lang_code = dml_dmlqz.forced_lang;
      }else{
        dermObj.lang_code = navigator.language;
      }

      let xhr = new XMLHttpRequest();
      xhr.open('GET',`https://dml-quiz-production.herokuapp.com/lang/${dermObj.lang_code}`);
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.responseType = 'json';

      xhr.onload = (successEvent)=>{
        console.log("success lang call", xhr.response);
        dermObj.lang_code=xhr.response.lang_code;
        dermObj.textData = xhr.response.data;
        resolve(xhr.response.data);
      }

      xhr.onerror = (errorEvent)=>{
        console.error("error lang call", errorEvent);
        reject();
      }

      xhr.abort = (abortEvent)=>{
        console.error("abort lang call",abortEvent);
        reject();
      }

      xhr.ontimeout = (timeoutEvent)=>{
        console.error("timeout lang call",timeoutEvent);
        reject();
      }

      xhr.send(null);

    })

  }

  dermObj.render_jsonTextObject = (textObj)=>{

    Object.keys(textObj).forEach((item,index)=>{
      if ( item == "!variables!"){
        dermObj.updateJsVariables(textObj["!variables!"]);
      }else if ( item == "!attributes!"){
        dermObj.updateAttributes(textObj["!attributes!"]);
      }else{
        if (typeof textObj[item] == "object"){
          dermObj.render_jsonTextObject(textObj[item]);
        }else{
          try{
            console.log(item)
            if (textObj[item] != ""){
              //document.querySelectorAll("#"+item)
              document.querySelectorAll(`[data-widget-text-term=${item}]`).forEach((htmlEl)=>{
                htmlEl.innerHTML = textObj[item];
              })

            }
          }catch(err){
            dermObj.debug('INFO - Element with id '+item+' not found - err: ',err);
          }
        }
      }
    })
  }

  dermObj.updateJsVariables = (variablesObj)=>{
    Object.keys(variablesObj).forEach((item,index)=>{
      try{
        dermObj[item] = variablesObj[item];
      }catch(err){
        dermObj.debug('Variable '+ item +' not found - err: ',err);
      }
    });
    dermObj.debug("done variables");
  }


  dermObj.updateAttributes = (attributeObj) =>{
    Object.keys(attributeObj).forEach((item, index) => {
      let attrName = Object.keys(attributeObj[item]);
      let attrValue = attributeObj[item][attrName];
      document.querySelectorAll(`[data-widget-text-term=${item}]`).forEach((htmlEl)=>{
        try{
          console.log(htmlEl, attrName, attrValue)
          htmlEl.setAttribute(attrName,attrValue);
        }catch(err){
          dermObj.debug("error in setting attributes: ",err);
        }
      })

    });
    dermObj.debug("done variables");
  }
})();

  dermObj.surveyJs = {};

dermObj.multiAnswerRegister = {};

dermObj.surveyJs.getSurvey = async ()=>{

  return new Promise(async (resolve, reject)=>{

    if (dermObj.surveyId){

      const xhr = new XMLHttpRequest();
      xhr.open('GET',`https://api.surveyjs.io/public/Survey/getSurvey?surveyId=${dermObj.surveyId}`,true)
      xhr.setRequestHeader('Content-Type', 'application/json')
      xhr.responseType = "json";

      xhr.onload = async () => {
        dermObj.surveyData = xhr.response;
        resolve();
      }

      xhr.onerror = async () => {
        console.error(xhr);
        reject("error in getting survey")
      }


      xhr.onabort = async () => {
        console.error(xhr);
        reject("error in getting survey - abort")
      }

      xhr.send();


    }else{
      reject({status: "failed", message:"no serveyJS id provided"})
    }
  })
}


dermObj.surveyJs.submitQuiz = async ()=>{
  return new Promise(async (resolve,reject)=>{
    const xhr = new XMLHttpRequest();
    xhr.open('POST',`https://api.surveyjs.io/public/Survey/post`,true);
    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')

    xhr.onload = async () => {
      dermObj.debug(xhr.response);
      resolve();
    }

    xhr.onerror = async () => {
      console.error(xhr);
      reject("error in getting survey")
    }


    xhr.onabort = async () => {
      console.error(xhr);
      reject("error in getting survey - abort")
    }


    const payload = {
      "PostId": dermObj.postId,
      "SurveyResult" : JSON.stringify(dermObj.surveyResults)
    }





    xhr.send(JSON.stringify(payload));
  });
}



dermObj.surveyJs.buildSurvey = async ()=>{
  return new Promise((resolve ,reject)=>{

    if (dermObj.surveyData){

      dermObj.debug("survey data: ", dermObj.surveyData);

      dermObj.quizDict = {}

      dermObj.surveyResults = {};

      dermObj.currentSlide = 1;
      dermObj.visitedSlide = 0;
      dermObj.slidesCount = dermObj.surveyData.pages.length;
      dermObj.slidesContainer = document.getElementById("dmlqz_slides_container");
      dermObj.progressBar = document.getElementById("dmlqz_progress_bar");
      dermObj.nextButton = document.querySelector("#dmlqz_navigation_container .dmlqz_next_button");
      dermObj.backButton = document.querySelector("#dmlqz_navigation_container .dmlqz_back_button");
      dermObj.submitButton = document.querySelector("#dmlqz_navigation_container .dmlqz_submit_button");

      dermObj.surveyJs.lang = "en";

      dermObj.slidesContainer.innerHTML = "";
      dermObj.slidesContainer.style.left = "0%";

      if (dermObj.surveyJs.lang == 'en'){dermObj.quizLangCode = 'default'};




      dermObj.slidesContainer.style.width = `${dermObj.slidesCount * 100}%`;
      dermObj.progressBar.style.width = `${1/dermObj.slidesCount * 100}%`;

      dermObj.surveyData.pages.forEach( async (slide,index) => {

        //dermObj.debug(slide)

        const newSlide = document.createElement('div');
        newSlide.id = `dmlqz_slide_${index+1}`;
        newSlide.classList.add("dmlqz_slide");
        dermObj.slidesContainer.appendChild(newSlide);

        dermObj.quizDict[newSlide.id] = {}
        dermObj.quizDict[newSlide.id].slideId = slide.name;

        if (slide.elements){
          const question = slide.elements[0];

          if (question.type == 'html'){
            console.log(question)
            if (question.html.indexOf('dmlqz_isRequired') > -1 ){
              question.isRequired = true;
            }
          }
          //console.log(question)

          dermObj.quizDict[newSlide.id].isRequired = question.isRequired ? question.isRequired : false;
          dermObj.quizDict[newSlide.id].type = question.type;
          dermObj.quizDict[newSlide.id].questionId = question.name;

          if (index == 0 && question.isRequired){
            dermObj.nextButton.classList.add('dmlqz_inactive');
          }

          if (question.type == "text"){
            const slideInnerHTML = await dermObj.surveyJs.buildTextQuestion(question);
            //dermObj.debug(slideInnerHTML);
            newSlide.innerHTML = slideInnerHTML;
          }

          if (question.type == "radiogroup"){
            const slideInnerHTML = await dermObj.surveyJs.buildSingleAnswerQuestion(question);
            //dermObj.debug(slideInnerHTML);
            newSlide.innerHTML = slideInnerHTML;
          }

          if (question.type == "checkbox"){
            const slideInnerHTML = await dermObj.surveyJs.buildMultipleChoiceQuestion(question);
            //dermObj.debug(slideInnerHTML);
            newSlide.innerHTML = slideInnerHTML;
          }

          if (question.type == "html"){
            newSlide.innerHTML = question.html;
            //dermObj.render_jsonTextObject(dermObj.textData);
          }


        }




      })

      resolve()
    }else{
      reject({status: "failed", "message": "no survey data present"});
    }

  })

}

dermObj.surveyJs.next = async ()=>{
  if (dermObj.currentSlide < dermObj.slidesCount){
    await dermObj.evaluateCurrentQuestion();
    await dermObj.prepareNextSlide();
    dermObj.visitedSlide = Math.max(dermObj.visitedSlide, dermObj.currentSlide );
    dermObj.currentSlide++;
    dermObj.slidesContainer.style.left = `-${(dermObj.currentSlide - 1 )* 100}%`;
    dermObj.progressBar.style.width =  `${(dermObj.currentSlide / dermObj.slidesCount )* 100}%`;
    dermObj.backButton.classList.remove('dmlqz_inactive');
    if (dermObj.currentSlide == dermObj.slidesCount){
      dermObj.nextButton.classList.remove('dmlqz_visible');
      dermObj.submitButton.classList.add('dmlqz_visible');
    }
  }
}

dermObj.surveyJs.back = async ()=>{
  if (dermObj.currentSlide > 1){
    dermObj.visitedSlide = Math.max(dermObj.visitedSlide, dermObj.currentSlide );
    dermObj.currentSlide--;
    dermObj.slidesContainer.style.left = `-${(dermObj.currentSlide - 1)* 100}%`;
    dermObj.progressBar.style.width =  `${(dermObj.currentSlide / dermObj.slidesCount )* 100}%`;
    dermObj.nextButton.classList.add('dmlqz_visible');
    dermObj.submitButton.classList.remove('dmlqz_visible');
  }
  if (dermObj.currentSlide == 0){
    dermObj.backButton.classList.add('dmlqz_inactive');
  }
}





dermObj.surveyJs.getCorrectText =  (textInput)=>{
  if (typeof textInput === 'string'){
    return(textInput)
  }

  if (textInput[dermObj.surveyJs.lang]){
    return textInput[dermObj.surveyJs.lang];
  }else{
    return textInput.default;
  }

}

dermObj.surveyJs.buildTextQuestion = async (questionObj)=>{

  let htmlString = "";

  htmlString += `<p class="dmlqz_question">${dermObj.surveyJs.getCorrectText(questionObj.title)}</p>`;
  if (questionObj.description){
    htmlString += `<p class="dmlqz_question_description">${dermObj.surveyJs.getCorrectText(questionObj.description)}</p>`;
  }
  if (questionObj.placeHolder){
    const placeHolderString = dermObj.surveyJs.getCorrectText(questionObj.placeHolder);
    if (placeHolderString.indexOf('data-widget-attribute-text-term') > -1 ){
      try{
        const textTerm = placeHolderString.split("=")[1];
        htmlString += `<input type="text" class="dmlqz_input" data-widget-attribute-type="placeholder" data-widget-attribute-text-term="${textTerm}" oninput="dml_dmlqz.surveyJs.checkAllowNextButton()">`
      }catch(err){console.error(err)}
    }else{
      htmlString += `<input type="text" class="dmlqz_input" placeholder="${placeHolderString}" oninput="dml_dmlqz.surveyJs.checkAllowNextButton()">`
    }
  }else{
    htmlString += `<input type="text" class="dmlqz_input">`
  }
  return(htmlString)
}

dermObj.surveyJs.buildSingleAnswerQuestion = async (questionObj)=>{
  let htmlString = "";

  htmlString += `<p class="dmlqz_question">${dermObj.surveyJs.getCorrectText(questionObj.title)}</p>`;
  if (questionObj.description){
    htmlString += `<p class="dmlqz_question_description">${dermObj.surveyJs.getCorrectText(questionObj.description)}</p>`;
  }

  htmlString += '<div class="dmlqz_choices_container">';
  questionObj.choices.forEach((choiceObj)=>{
    htmlString += `<div class="dmlqz_choice_card" data-widget-item-answer="${choiceObj.value}" onclick="dml_dmlqz.toggleSingleAnswer(event)"><p class="dmlqz_choice_text">${dermObj.surveyJs.getCorrectText(choiceObj.text)}</p></div>`
  })
  htmlString += '</div>';

  return(htmlString)

}

dermObj.surveyJs.buildMultipleChoiceQuestion = async (questionObj)=>{
  let htmlString = "";

  htmlString += `<p class="dmlqz_question">${dermObj.surveyJs.getCorrectText(questionObj.title)}</p>`;
  if (questionObj.description){
    htmlString += `<p class="dmlqz_question_description">${dermObj.surveyJs.getCorrectText(questionObj.description)}</p>`;
  }

  htmlString += '<div class="dmlqz_choices_container">';
  if (questionObj.maxSelectedChoices != undefined && questionObj.maxSelectedChoices != null){
    dermObj.multiAnswerRegister[questionObj.name]=[];
    questionObj.choices.forEach((choiceObj,choiceIndex)=>{
      htmlString += `<div class="dmlqz_choice_card" data-widget-item-answer="${choiceObj.value}" data-widget-answer-id="${questionObj.name}_a${choiceIndex}"  onclick="dml_dmlqz.toggleLimitedMultiAnswer(event, '${questionObj.name}',  ${questionObj.maxSelectedChoices})"><p class="dmlqz_choice_text">${dermObj.surveyJs.getCorrectText(choiceObj.text)}</p></div>`;
    });
  }else{
    questionObj.choices.forEach((choiceObj)=>{
      htmlString += `<div class="dmlqz_choice_card" data-widget-item-answer="${choiceObj.value}"  onclick="dml_dmlqz.toggleMultiAnswer(event)"><p class="dmlqz_choice_text">${dermObj.surveyJs.getCorrectText(choiceObj.text)}</p></div>`;
    });
  }
  htmlString += '</div>';

  return(htmlString)
}

dermObj.surveyJs.checkAllowNextButton = async () => {
  const currentSlideId = `dmlqz_slide_${dml_dmlqz.currentSlide}`;
  const type = dermObj.quizDict[currentSlideId].type
  if ( type == 'text'){
    const inputVal  = document.querySelector(`#${currentSlideId} input.dmlqz_input`).value;
    if (inputVal && inputVal != ""){
      dermObj.nextButton.classList.remove('dmlqz_inactive');
    }else{
      dermObj.nextButton.classList.add('dmlqz_inactive');
    }
  }
}

dermObj.evaluateCurrentQuestion = async () => {
  const currentSlideId = `dmlqz_slide_${dml_dmlqz.currentSlide}`;
  const type = dermObj.quizDict[currentSlideId].type
  if ( type == 'text'){
    const inputVal  = document.querySelector(`#${currentSlideId} input.dmlqz_input`).value;
    dermObj.surveyResults[dermObj.quizDict[currentSlideId].questionId] = inputVal;
  }

  if (type == 'radiogroup'){
    if (document.querySelector(`#${currentSlideId} .dmlqz_selected`)){
      dermObj.surveyResults[dermObj.quizDict[currentSlideId].questionId] = document.querySelector(`#${currentSlideId} .dmlqz_selected`).dataset.widgetItemAnswer;
    }else{
      dermObj.surveyResults[dermObj.quizDict[currentSlideId].questionId] = '';
    }

  }

  if (type == 'checkbox'){
    let answerArray = [];
    document.querySelectorAll(`#${currentSlideId} .dmlqz_selected`).forEach((selectedItem)=>{
      answerArray.push(selectedItem.dataset.widgetItemAnswer);
    })
    dermObj.surveyResults[dermObj.quizDict[currentSlideId].questionId] = answerArray;

  }

  if (type == 'html'){
    try{
      let answerArray = [];
      document.querySelectorAll(`#${currentSlideId} .dmlqz_selected`).forEach((selectedItem)=>{
        answerArray.push(selectedItem.dataset.widgetItemAnswer);
      })
      if (answerArray.length > 0){
        if (answerArray.length == 1){
          dermObj.surveyResults[dermObj.quizDict[currentSlideId].questionId] = answerArray[0];
        }else{
          dermObj.surveyResults[dermObj.quizDict[currentSlideId].questionId] = answerArray;
        }
      }
    }catch(err){}
  }

  return;
}

dermObj.prepareNextSlide = async () => {
  const nextSlideId =  `dmlqz_slide_${dml_dmlqz.currentSlide + 1}`;
  const nextSlide = document.getElementById(nextSlideId);


  if (nextSlide.querySelectorAll('span[data-widget-answer]').length > 0 ){

    nextSlide.querySelectorAll('span[data-widget-answer]').forEach((textEl)=>{
      const slideId = `dmlqz_slide_${textEl.dataset.widgetAnswer}`;
      const answer = dermObj.surveyResults[dermObj.quizDict[slideId].questionId];
      textEl.innerHTML = answer;
    });

  }


  if (dermObj.quizDict[nextSlideId].isRequired && dermObj.visitedSlide < dermObj.currentSlide){
    if (dermObj.currentSlide < dermObj.slidesCount){
      dermObj.nextButton.classList.add('dmlqz_inactive');
    }else{
      dermObj.submitButton.classList.add('dmlqz_inactive');
    }
  }


  return;
}

dermObj.toggleSingleAnswer = (evt)=>{
  const targetEl = evt.target;
  const parentCont = targetEl.parentElement;
  parentCont.querySelectorAll('.dmlqz_choice_card').forEach((card)=>{
    if (card != targetEl){
      card.classList.remove('dmlqz_selected');
    }else{
      card.classList.toggle('dmlqz_selected');
    }

  })

  if (parentCont.querySelectorAll('.dmlqz_selected').length == 0 && dermObj.quizDict[`dmlqz_slide_${dermObj.currentSlide}`].isRequired && dermObj.visitedSlide < dermObj.currentSlide){
    dermObj.nextButton.classList.add('dmlqz_inactive');
  }else{
    dermObj.nextButton.classList.remove('dmlqz_inactive');
  }
}

dermObj.toggleSingleImageAnswer = (evt)=>{
  const targetEl = evt.target;
  const parentCont = targetEl.parentElement;
  const buttons = Array.from(parentCont.children);

  buttons.forEach((button)=>{
    if (button != targetEl){
      button.classList.remove('dmlqz_selected');
    }else{
      button.classList.toggle('dmlqz_selected');
    }

  })

  if (parentCont.querySelectorAll('.dmlqz_selected').length == 0 && dermObj.quizDict[`dmlqz_slide_${dermObj.currentSlide}`].isRequired && dermObj.visitedSlide < dermObj.currentSlide){
    dermObj.nextButton.classList.add('dmlqz_inactive');
  }else{
    dermObj.nextButton.classList.remove('dmlqz_inactive');
  }
}



dermObj.toggleMultiAnswer = (evt)=>{
  const targetEl = evt.target;
  const parentCont = targetEl.parentElement;

  targetEl.classList.toggle('dmlqz_selected');

  if (parentCont.querySelectorAll('.dmlqz_selected').length == 0 && dermObj.quizDict[`dmlqz_slide_${dermObj.currentSlide}`].isRequired && dermObj.visitedSlide < dermObj.currentSlide){
    dermObj.nextButton.classList.add('dmlqz_inactive');
  }else{
    dermObj.nextButton.classList.remove('dmlqz_inactive');
  }
}

dermObj.toggleLimitedMultiAnswer = (evt, questionId, selectionLimit)=>{
  const targetEl = evt.target;
  const parentCont = targetEl.parentElement;

  if (targetEl.classList.contains('dmlqz_selected')){
    const indexInAnswerRegister = dermObj.multiAnswerRegister[questionId].indexOf(targetEl.dataset.widgetAnswerId);
    if ( indexInAnswerRegister > -1 ){
      dermObj.multiAnswerRegister[questionId].splice(indexInAnswerRegister,1);
    }
  }else{
    dermObj.multiAnswerRegister[questionId].push(targetEl.dataset.widgetAnswerId);
    if (dermObj.multiAnswerRegister[questionId].length > selectionLimit){
      const removeChoiceId = dermObj.multiAnswerRegister[questionId][0];
      parentCont.querySelector(`[data-widget-answer-id=${removeChoiceId}]`).classList.remove('dmlqz_selected');
      dermObj.multiAnswerRegister[questionId].shift();
    }
  }

  targetEl.classList.toggle('dmlqz_selected');

  if (parentCont.querySelectorAll('.dmlqz_selected').length == 0 && dermObj.quizDict[`dmlqz_slide_${dermObj.currentSlide}`].isRequired && dermObj.visitedSlide < dermObj.currentSlide){
    dermObj.nextButton.classList.add('dmlqz_inactive');
  }else{
    dermObj.nextButton.classList.remove('dmlqz_inactive');
  }
}


dermObj.surveyJs.submitButton = async ()=>{
  dermObj.surveyJs.submitQuiz();
}


dermObj.resetSurvey = async () => {
  const backButton = dermObj.body.querySelector('#dmlqz_navigation_container .dmlqz_back_button');
  backButton.classList.add('dmlqz_inactive', 'dmlqz_visible');

  const nextButton = dermObj.body.querySelector('#dmlqz_navigation_container .dmlqz_next_button');
  nextButton.classList.add('dmlqz_visible');
  nextButton.classList.remove('dmlqz_inactive');

  const submitButton = dermObj.body.querySelector('#dmlqz_navigation_container .dmlqz_submit_button');
  submitButton.classList.remove('dmlqz_inactive', 'dmlqz_visible');

  dermObj.multiAnswerRegister = {};

  await dermObj.surveyJs.buildSurvey();


  return;
}

dermObj.surveyJs.disableTabIndexInSlides = async ()=>{
  dermObj.slidesContainer.querySelectorAll('button').forEach((buttonEl)=>{
    buttonEl.setAttribute('tabindex','-1');
  })
  dermObj.slidesContainer.querySelectorAll('input').forEach((inputEl)=>{
    inputEl.setAttribute('tabindex','-1');
  })
}


  dermObj.initClassesDueWidth = async()=>{
  return new Promise(async (resolve, reject)=>{

    const bodyWidthCheck = setInterval(async ()=>{
      if (dermObj.body.offsetWidth > 0){
        clearInterval(bodyWidthCheck);
        await dermObj.updateClassesDueWith();
        window.addEventListener('resize', dermObj.updateClassesDueWith);
      }
      resolve();
    },50)

    const isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
    if (isMacLike){
      dermObj.body.classList.add('dml_is_os');
    }

  })
}

dermObj.updateClassesDueWith = async ()=>{
  return new Promise(async (resolve, reject)=>{

    if (dermObj.body.offsetWidth > 768){
      dermObj.widget_wrapper.classList.remove("dml_mobile");
      dermObj.body.classList.remove("dml_mobile");
    }else{
      dermObj.widget_wrapper.classList.add("dml_mobile");
      dermObj.body.classList.add("dml_mobile");
    }

    resolve();
  });
}


  dermObj.main = async function(){


    //let textData = await dermObj.getLanguageData();
    //dermObj.render_jsonTextObject(textData);

    await dermObj.initClassesDueWidth();

    try{
      await dermObj.surveyJs.getSurvey();

    }catch(err){
      console.error(err)
    }

    try{
      await dermObj.surveyJs.buildSurvey();

      await dermObj.surveyJs.disableTabIndexInSlides();

    }catch(err){
      console.error(err)
    }



    dermObj.body.style.opacity = 1;
    dermObj.surveyLoaded = true;



  }

  dermObj.main();

})()