{% extends "base.html" %}

{% block body_class %}draw{% endblock %}

{% block body %}

  <header class="controls">
    <label>etherpad</label>
    <input id="pad-name" type="text" value="{{params['pad']}}" data-name="p"/>
    <button id="button-pad" data-use="pad-name">go</button>

    <hr>

    <button id="button-svg">generate</button>

    <input class="get-input" id="text-input" type="text" value="{{params['text']}}" data-name="t" data-frame="svg-iframe"/>

    <label  for="upper-checkbox">uppercase</label>
    <input  id="upper-checkbox" type="checkbox"/>

    <label>weight</label>
    <input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w" data-frame="svg-iframe"/>

    <label  for="text-checkbox"
            title="display the remaining text in the svg output in red">
            output text</label>
    <input  id="text-checkbox" type="checkbox" class="get-input"
            class="body-class-check" value="check-text" data-name="c" data-frame="svg-iframe" checked/>

    <script>
        function updateGET(frame, param, value){
            // object from GET parameters
            let [base_src, params_src] = frame.src.split("?");
            let params = new URLSearchParams(params_src);
            // update param
            params.set(param, value);
            // reconstituate URL
            let new_src = base_src + "?" + params.toString();
            // set and refresh
            frame.src = new_src;
        }

        let button_pad = document.getElementById('button-pad');
        let button_svg = document.getElementById('button-svg');
        
        // --- pad go button
        button_pad.addEventListener('click', function(){
            let svg_iframe = document.getElementById('svg-iframe');
            let pad_iframe = document.getElementById('pad-iframe');
            let input = document.getElementById(button_pad.dataset.use);
            let value = input.value;
            let param = input.dataset.name;

            let pad_src = pad_iframe.src;
            pad_src = pad_src.split('-');
            pad_src[pad_src.length-1] = value;
            pad_src = pad_src.join('-');
            pad_iframe.src = pad_src;

            let svg_src = svg_iframe.src;
            svg_src = svg_src.split('/');
            svg_src[svg_src.length-1] = value;
            svg_src = svg_src.join('/');
            svg_iframe.src = svg_src;

        });

        // --- svg generation button
        button_svg.addEventListener('click', function(){
          let svg_iframe = document.getElementById('svg-iframe');
          console.log("IFRAME RELOAD");
          svg_iframe.contentWindow.location.reload();
        });

        // --- get-input but on the pad and checkbox but on the pad
        let inputs = document.getElementsByClassName('get-input');
        for(let input of inputs){
          input.addEventListener('change', function(){
            let frame = document.getElementById(input.dataset.frame);
            const url = new URL(frame.src);

            if(input.type == 'checkbox'){
              url.searchParams.set(input.dataset.name, input.checked);
            }
            else{
              url.searchParams.set(input.dataset.name, input.value);
            }
            console.log(url);
            // frame.contentWindow.history.replaceState(null, null, url);
            frame.src = url
          });
        }
    </script>
  </header>

  <div class="font figfont reload" id="main">
    <iframe class="f-ascii" id="pad-iframe" src="{{params['pad-full']}}">
    </iframe>
    <iframe class="f-double" id="svg-iframe" src="/writing/{{params['pad']}}">
    </iframe>
  </div>

  <script>
    let button_pad = document.getElementById('button-pad');
    let button_svg = document.getElementById('button-svg');
    let svg_iframe = document.getElementById('svg-iframe');
    let pad_iframe = document.getElementById('pad-iframe');

    function updateGET(frame, param, value){
        // object from GET parameters
        let [base_src, params_src] = frame.src.split("?");
        let params = new URLSearchParams(params_src);
        // update param
        params.set(param, value);
        // reconstituate URL
        let new_src = base_src + "?" + params.toString();
        // set and refresh
        frame.src = new_src;
    }

    // --- pad go button
    button_pad.addEventListener('click', function(){
        let input = document.getElementById(button_pad.dataset.use);
        let value = input.value;
        let param = input.dataset.name;

        let pad_src = pad_iframe.src;
        pad_src = pad_src.split('-');
        pad_src[pad_src.length-1] = value;
        pad_src = pad_src.join('-');
        pad_iframe.src = pad_src;

        let svg_src = svg_iframe.src;
        svg_src = svg_src.split('/');
        svg_src[svg_src.length-1] = value;
        svg_src = svg_src.join('/');

        document.getElementById('main').classList.add("reload");
        svg_iframe.src = svg_src;

    });

    // --- svg generation button
    button_svg.addEventListener('click', function(){
      document.getElementById('main').classList.add("reload");
      svg_iframe.contentWindow.location.reload();
    });

    // --- get-input but on the pad and checkbox but on the pad
    let inputs = document.getElementsByClassName('get-input');
    for(let input of inputs){
      input.addEventListener('change', function(){
        let frame = document.getElementById(input.dataset.frame);
        const url = new URL(frame.src);

        if(input.type == 'checkbox'){
          url.searchParams.set(input.dataset.name, input.checked);
        }
        else{
          url.searchParams.set(input.dataset.name, input.value);
        }
        // frame.contentWindow.history.replaceState(null, null, url);
        document.getElementById('main').classList.add("reload");
        frame.src = url;
      });
    }

    let upper_checkbox = document.getElementById('upper-checkbox');
    let text_input = document.getElementById('text-input');
    upper_checkbox.addEventListener('change', function(){
      if(upper_checkbox.checked){
        text_input.value =  text_input.value.toUpperCase();
        let frame = document.getElementById("svg-iframe");
        const url = new URL(frame.src);
        url.searchParams.set(text_input.dataset.name, text_input.value);
        document.getElementById('main').classList.add("reload");
        frame.src = url
      }
      else{
        text_input.value =  text_input.value.toLowerCase();
        let frame = document.getElementById("svg-iframe");
        const url = new URL(frame.src);
        url.searchParams.set(text_input.dataset.name, text_input.value);
        document.getElementById('main').classList.add("reload");
        frame.src = url
      }
    })

    svg_iframe.addEventListener("load", function() {
      document.getElementById('main').classList.remove("reload");
    });
</script>

{% endblock %}