(function() {
  var take = function() {
    function render(template, data){ //console.log("render",template,data)
      return template.replace(/{{(.*?)}}/g, (match) => {
        return data[match.split(/{{|}}/).filter(Boolean)[0].trim()]
      })
    }

    function isMobile () {
     if (typeof navigator === 'undefined' || typeof navigator.userAgent !== 'string') {
       return false;
     }
     if(
        navigator.userAgent.match(/Android/i) || 
        navigator.userAgent.match(/webOS/i) || 
        navigator.userAgent.match(/iPhone/i) || 
        navigator.userAgent.match(/iPad/i) || 
        navigator.userAgent.match(/iPod/i) || 
        navigator.userAgent.match(/BlackBerry/i) || 
        navigator.userAgent.match(/Windows Phone/i)) 
      {
        return true
      }
    }

    function getUserAgentData() {
      if ('userAgentData' in window.navigator) { //console.log("userAgentData",window.navigator.userAgentData)
        return window.navigator.userAgentData
      } else { console.log("userAgentData not isSupported")
        return null
      }
    }

    function chatformCancelButtonClick(){
      let w = document.querySelector('.chatform_widget');
      if(w.dataset.targetPid){
        console.log(w.dataset.targetPid)
      }
      w.classList.toggle("close");
      if(w.classList.contains("close")){ //console.log("A chat_open")
        document.body.classList.remove("chat_open");  
      }else{ //console.log("B chat_close")
        document.body.classList.add("chat_open");  
      }
    }

    function getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
    }

    var isMobile;
    const userAgentData=getUserAgentData()
    if(userAgentData){
      isMobile = userAgentData.mobile
    }else{
      isMobile = isMobile();
    }
    var client="";
    var target="release";
    var mode="release";
    var device=(isMobile)?"mobile":"pc";

    switch (target) {
      case 'local':
          client="http://localhost:3333";
          break;
      case 'release':
          client="https://chatform-client.herokuapp.com/";
          break;
      case 'staging':
          client="https://chatform-client-staging.herokuapp.com/";
          break;
      default:
          client="https://chatform-client.herokuapp.com/";
    }
    
    var search = window.location.search.slice(1)  
    var v_id_val = ""
    if(getCookie("utag_main_v_id"))
      v_id_val= getCookie("utag_main_v_id")
    else if(getCookie("utag_main"))
      v_id_val = getCookie("utag_main").split("$")[0].split("_id:")[1]
    else
      v_id_val = ""
    // search +=  (v_id_val)?"&v_id="+v_id_val:""
    search += (v_id_val ?  "&v_id="+v_id_val : "&v_id=null")
    var widget = render(
      '<style>.chatform_widget{  box-sizing: border-box;  width: 500px;  display: block;  position: fixed;  bottom: 30px;  height: 670px;  right: 30px;  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);  border-radius: 8px;  overflow: hidden;  transition: all 0.3s ease-out;  z-index: 1001;}.chatform_widget_header{  height: 50px;  width: 100%;  background-color: #ffffff;  position: absolute;  display: flex;  align-items: center;  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);}.chatform_widget_header_text{  color: #2563eb;  width: 100%;  text-align: center;  font-size: initial;  font-family: sans-serif;}.chatform_widget_iframe_container{  width: 100%;  position: absolute;  bottom: 0;  top: 50px;  overflow: auto;  -webkit-overflow-scrolling:touch;}.chatform_widget_header img{  position: absolute;  right: 10px;}.chatform_widget iframe{  position: absolute;  width: 100%;  height: 100%;  box-sizing: border-box;  border: none;}.mobile.chatform_widget{  width: 100%;  display: block;  position: absolute;  bottom: 0;  height: 100%;  right: 0px;  border-radius: 0px;}#chatform_widget_cancelbtn{  cursor: pointer;  width:25px!important;}.chatform_widget.close{  bottom: -800px;  /*transform: scale(0.2);*/  opacity: 0;  pointer-events: none;}.mobile.chat_open > *{  /*display:none;*/  position:fixed}.chat_open .chatform_widget{  display:block; }</style>'+
      '<div class="chatform_widget close {{device}}">'+
        '<div class="chatform_widget_iframe_container">'+
          '<iframe class="chatform_widget_iframe" src="{{client}}?pid={{pid}}&mode={{mode}}{{search}}" ></iframe>'+
        '</div>'+
        '<div class="chatform_widget_header">'+
          '<h6 class="chatform_widget_header_text">'+
            '無料体験教材・資料のお申し込み {{target}} {{modestr}}'+
          '</h6>'+
          '<img id="chatform_widget_cancelbtn" src="https://res.cloudinary.com/dts6mbw86/image/upload/v1671668772/benesse/close_gaoosk.svg" width="25px" class="absolute">'+
        '</div>'+
      '</div>',
      {
        pid    :"we6986e67f",
        mode   : mode,
        client : client,
        device : device,
        target : (target!="release")?target:"",
        modestr: (mode=="draft")?"draft":"",
        search : (search)?"&"+search:"",
      }
    );

    const body = document.body;
    if(body){ //console.log(body)
      body.classList.add(device)
      body.insertAdjacentHTML('beforeend', widget);
      const target = document.getElementsByClassName('chatform_widget')[0];
      const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          if(!mutation.target.classList.contains("close")){            
            const iframe = document.getElementsByClassName('chatform_widget_iframe')[0];
            var contentWindow = iframe.contentWindow;
            if(contentWindow){
              contentWindow.postMessage("chat_open", "*");
            }
          }
        });
      });
      const config = {
        characterData: true,
        attributes:true,
        subtree: true
      };
      observer.observe(target, config);
    }
    var setWidget = function(){
      let button = document.getElementById('chatform_widget_cancelbtn');
      button.addEventListener('click', chatformCancelButtonClick);
      let chatformBtns = document.querySelectorAll('.chatformBtn');
      if(chatformBtns.length>0){
        chatformBtns.forEach((item, i) => {
          item.addEventListener('click', chatformCancelButtonClick);
        });
      }
    };
    setTimeout(setWidget, 1000);
  }
  setTimeout(take, 0);
 }())