{% extends 'panel/base.html' %}

{% block panel_title %}Kadrowanie obrazu{% endblock %}
{% block heading %}Kadruj: {{ object.name }}{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">Oryginał ma {{ object.dimensions }}. Kadr zastępuje plik na dobre - miniatura i wersje responsywne powstają od nowa.</p>{% endblock %}
{% block actions %}<a class="btn-ghost" href="{% url 'panel:medialib:file_edit' object.pk %}">Wróć do pliku</a>{% endblock %}

{% block content %}
<form method="post" novalidate class="grid gap-4 lg:grid-cols-3">
  {% csrf_token %}

  <section class="card lg:col-span-2">
    <div class="card-body space-y-3">
      <h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Zaznacz kadr</h2>
      <p class="help">Przeciągnij myszka po obrazie albo wpisz wartości obok. Bez zaznaczenia kadrem jest cały obraz.</p>

      <div id="crop-stage" data-width="{{ object.width }}" data-height="{{ object.height }}"
           class="relative w-full select-none overflow-hidden border border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-900/60">
        <img id="crop-image" src="{{ object.url }}" alt="{{ object.alt|default:object.name }}"
             class="block w-full" draggable="false">
        <div id="crop-box" hidden
             class="pointer-events-none absolute border-2 border-brand-500 bg-brand-500/20"></div>
      </div>

      <div class="flex flex-wrap gap-2">
        <span class="text-xs text-slate-500 dark:text-slate-400">Proporcje:</span>
        <button type="button" class="btn-ghost !px-2 !py-1 text-xs" data-ratio="0">dowolne</button>
        <button type="button" class="btn-ghost !px-2 !py-1 text-xs" data-ratio="1">1:1</button>
        <button type="button" class="btn-ghost !px-2 !py-1 text-xs" data-ratio="1.3333">4:3</button>
        <button type="button" class="btn-ghost !px-2 !py-1 text-xs" data-ratio="1.7778">16:9</button>
      </div>
    </div>
  </section>

  <div class="space-y-4">
    <section class="card">
      <div class="card-body space-y-4">
        <h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Kadr w pikselach</h2>
        {% include 'panel/partials/form.html' %}
      </div>
    </section>

    <div class="card">
      <div class="card-body flex flex-wrap gap-2">
        <button class="btn-primary" type="submit"
                data-confirm="Przyciąć obraz na stałe? Oryginału nie da się odzyskać.">Przytnij obraz</button>
        <a class="btn-ghost" href="{% url 'panel:medialib:file_edit' object.pk %}">Anuluj</a>
      </div>
    </div>
  </div>
</form>

<script nonce="{{ csp_nonce }}">
(function () {
  var stage = document.getElementById('crop-stage');
  var image = document.getElementById('crop-image');
  var box = document.getElementById('crop-box');
  if (!stage || !image || !box) { return; }

  var fields = {
    left: document.getElementById('id_left'),
    top: document.getElementById('id_top'),
    width: document.getElementById('id_width'),
    height: document.getElementById('id_height')
  };
  var full = { width: parseInt(stage.dataset.width, 10), height: parseInt(stage.dataset.height, 10) };
  var ratio = 0;
  var start = null;

  // Obraz jest pokazany w szerokości panelu, a kadr zapisujemy w pikselach
  // oryginału - stąd przelicznik między jednym a drugim.
  function scale() { return full.width / image.clientWidth; }

  function paint(rect) {
    box.hidden = false;
    box.style.left = rect.x + 'px';
    box.style.top = rect.y + 'px';
    box.style.width = rect.w + 'px';
    box.style.height = rect.h + 'px';
  }

  function store(rect) {
    var k = scale();
    fields.left.value = Math.round(rect.x * k);
    fields.top.value = Math.round(rect.y * k);
    fields.width.value = Math.max(16, Math.round(rect.w * k));
    fields.height.value = Math.max(16, Math.round(rect.h * k));
  }

  function point(event) {
    var area = image.getBoundingClientRect();
    return {
      x: Math.min(Math.max(event.clientX - area.left, 0), area.width),
      y: Math.min(Math.max(event.clientY - area.top, 0), area.height)
    };
  }

  function rectangle(from, to) {
    var x = Math.min(from.x, to.x);
    var y = Math.min(from.y, to.y);
    var w = Math.abs(to.x - from.x);
    var h = Math.abs(to.y - from.y);
    if (ratio) {
      h = w / ratio;
      if (y + h > image.clientHeight) { h = image.clientHeight - y; w = h * ratio; }
    }
    return { x: x, y: y, w: w, h: h };
  }

  stage.addEventListener('pointerdown', function (event) {
    start = point(event);
    stage.setPointerCapture(event.pointerId);
    event.preventDefault();
  });

  stage.addEventListener('pointermove', function (event) {
    if (!start) { return; }
    paint(rectangle(start, point(event)));
  });

  stage.addEventListener('pointerup', function (event) {
    if (!start) { return; }
    var rect = rectangle(start, point(event));
    start = null;
    if (rect.w < 8 || rect.h < 8) { box.hidden = true; return; }
    paint(rect);
    store(rect);
  });

  Array.prototype.forEach.call(document.querySelectorAll('[data-ratio]'), function (button) {
    button.addEventListener('click', function () {
      ratio = parseFloat(button.dataset.ratio) || 0;
    });
  });
})();
</script>
{% endblock %}