{% extends "base.html" %}

{% block body_class %}catalogue{% endblock %}

{% block body %}

  <header class="controls">
    <details class="collection-menu" id="collection-menu">
      <summary id="current-figfont">script.flf</summary>
      <div>
      {% for type, type_data in collection.items()%}
        <details class="category">
          <summary>{{type}}</summary>
          <div class="collection" style="--index: {{loop.index}};">

          {% for database in databases.keys() %}
            {% set fonts = type_data['fonts']|selectattr('database', 'equalto', database) %}
            {% for f in fonts %}
              <div data-path="{{f['path']}}" data-name="{{f['name']}}" class="{{f['database']}} figfont">
                <img class="thumbnail" src="{{f['thumbnail']}}">
                {{f['name']}}
              </div>
            {% endfor %}
          {% endfor %}
          <!-- <a class="specimen-link" href="/specimen/{{type}}" target="_blank">see all {{type}}</a> -->

          </div>
        </details>
      {% endfor %}
        <div class="collection-menu-back">
          {% for database, legend in databases.items() %}
            <div class="legend {{database}}"><strong>{{database}}</strong> {{legend}}</div>
          {% endfor %}
        </div>
      </div>
    </details>

    <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  for="fix-checkbox"
            title="custom regex to try to map unrecognized character to ones that are processed by svgbob">
            autofix</label>
    <input  id="fix-checkbox" type="checkbox" 
            class="body-class-check" value="check-fix"/> -->

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

  <div class="split-screen catalogue reload" id="main">
    <iframe   class="f-double" id="svg-iframe" 
              src="/writing/{{ 'static/db/default/stroke/script.flf'.split('/') | join('$') }}">
    </iframe>
  </div>

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

    let new_url = new URL(svg_iframe.src);

    // --- change current figfont
    for(let figfont of figfonts){
      figfont.addEventListener('click', function(){
        let encoded_path = figfont.dataset.path.split('/').join('$');
        let figname = figfont.dataset.name;

        let url = new URL(svg_iframe.src);

        svg_src = url.pathname.split('/');
        svg_src[svg_src.length-1] = encoded_path;
        svg_src = svg_src.join('/');
        url.pathname = svg_src;
        console.log(url)

        current.innerHTML = figname;

        document.getElementById('main').classList.add("reload");
        document.getElementById('collection-menu').removeAttribute("open");

        new_url = url;
        svg_iframe.src = new_url;
      });
    }

    // --- svg generation button
    button_svg.addEventListener('click', function(){
      svg_iframe.src = new_url;
      document.getElementById('main').classList.add("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);
        }
        new_url = 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);
        new_url = 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);
        new_url = url;
      }
    })

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

    let categories = document.getElementsByClassName('category');
    for(let category of categories){
      category.addEventListener('click', function(){
        console.log('closing')
        for(let other of categories){
          if(other != category){
            other.removeAttribute('open');
          }
        }
      })
    }
</script>

{% endblock %}