{% extends "@Contao/frontend_module/_base.html.twig" %}

{% block content %}
  {% if error is defined and error %}
    <p role="alert">{{ error }}</p>
    <p><a href="{{ backUrl }}">Zurück</a></p>
  {% elseif form is defined and form %}
    <link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css">
    <link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css">
    <script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.min.js"></script>
    <script type="module" src="{{ asset('bundles/eventmanager/editor.js') }}?v=1"></script>
    <script src="{{ asset('bundles/eventmanager/editor-fallback.js') }}?v=1"></script>

    {{ form_start(form, { attr: { 'aria-live': 'polite' } }) }}
      <input type="hidden" name="REQUEST_TOKEN" value="{{ requestToken }}">
      <input type="hidden" id="remove_logo" name="remove_logo" value="0">
      {{ form_row(form.title) }}
      {{ form_row(form.street) }}
      {{ form_row(form.street2) }}
      {{ form_row(form.postal) }}
      {{ form_row(form.city) }}
      {{ form_row(form.phone) }}
      {{ form_row(form.email) }}
      {{ form_row(form.website) }}

      <div class="widget">
        {{ form_label(form.description, null, { label_attr: { id: form.description.vars.id ~ '-label' } }) }}

        <div
          class="event-editor-toolbar"
          data-mm-editor-toolbar="{{ form.description.vars.id }}"
          role="toolbar"
          aria-label="Formatierungswerkzeuge Beschreibung"
          aria-orientation="horizontal"
          aria-describedby="{{ form.description.vars.id }}-shortcuts"
          aria-controls="{{ form.description.vars.id }}-editor"
        >
          <button type="button" data-action="paragraph" title="Absatz">
            <img src="{{ asset('bundles/eventmanager/icons/paragraph.svg') }}" alt="" aria-hidden="true">
            <span class="visually-hidden">Absatz</span>
          </button>
          <button type="button" data-action="h2" title="Überschrift H2">
            <img src="{{ asset('bundles/eventmanager/icons/h2.svg') }}" alt="" aria-hidden="true">
            <span class="visually-hidden">H2</span>
          </button>
          <button type="button" data-action="h3" title="Überschrift H3">
            <img src="{{ asset('bundles/eventmanager/icons/h3.svg') }}" alt="" aria-hidden="true">
            <span class="visually-hidden">H3</span>
          </button>
          <button type="button" data-action="bold" title="Fett (Strg/Cmd+B)" aria-keyshortcuts="Control+B Meta+B">
            <img src="{{ asset('bundles/eventmanager/icons/bold.svg') }}" alt="" aria-hidden="true">
            <span class="visually-hidden">Fett</span>
          </button>
          <button type="button" data-action="italic" title="Kursiv (Strg/Cmd+I)" aria-keyshortcuts="Control+I Meta+I">
            <img src="{{ asset('bundles/eventmanager/icons/italic.svg') }}" alt="" aria-hidden="true">
            <span class="visually-hidden">Kursiv</span>
          </button>
          <button type="button" data-action="underline" title="Unterstrichen (Strg/Cmd+U)" aria-keyshortcuts="Control+U Meta+U">
            <img src="{{ asset('bundles/eventmanager/icons/underline.svg') }}" alt="" aria-hidden="true">
            <span class="visually-hidden">Unterstrichen</span>
          </button>
          <button type="button" data-action="bulletList" title="Liste">
            <img src="{{ asset('bundles/eventmanager/icons/ul.svg') }}" alt="" aria-hidden="true">
            <span class="visually-hidden">Liste</span>
          </button>
          <button type="button" data-action="orderedList" title="Nummerierte Liste">
            <img src="{{ asset('bundles/eventmanager/icons/ol.svg') }}" alt="" aria-hidden="true">
            <span class="visually-hidden">Nummerierte Liste</span>
          </button>
          <button type="button" data-action="indent" title="Einzug vergrößern">
            <img src="{{ asset('bundles/eventmanager/icons/indent.svg') }}" alt="" aria-hidden="true">
            <span class="visually-hidden">Einzug vergrößern</span>
          </button>
          <button type="button" data-action="outdent" title="Einzug verkleinern">
            <img src="{{ asset('bundles/eventmanager/icons/outdent.svg') }}" alt="" aria-hidden="true">
            <span class="visually-hidden">Einzug verkleinern</span>
          </button>
          <button type="button" data-action="undo" title="Rückgängig (Strg/Cmd+Z)" aria-keyshortcuts="Control+Z Meta+Z">
            <img src="{{ asset('bundles/eventmanager/icons/undo.svg') }}" alt="" aria-hidden="true">
            <span class="visually-hidden">Rückgängig</span>
          </button>
          <button type="button" data-action="redo" title="Wiederholen (Strg/Cmd+Shift+Z)" aria-keyshortcuts="Control+Shift+Z Meta+Shift+Z">
            <img src="{{ asset('bundles/eventmanager/icons/redo.svg') }}" alt="" aria-hidden="true">
            <span class="visually-hidden">Wiederholen</span>
          </button>
        </div>

        <div id="{{ form.description.vars.id }}-shortcuts" class="event-editor-shortcuts">
          <strong>Tastaturkürzel:</strong>
          <ul>
            <li><span aria-hidden="true">Strg/Cmd+B</span> – Fett</li>
            <li><span aria-hidden="true">Strg/Cmd+I</span> – Kursiv</li>
            <li><span aria-hidden="true">Strg/Cmd+U</span> – Unterstrichen</li>
            <li><span aria-hidden="true">Strg/Cmd+Z</span> – Rückgängig</li>
            <li><span aria-hidden="true">Strg/Cmd+Shift+Z</span> – Wiederholen</li>
            <li>Pfeiltasten links/rechts in der Toolbar – zwischen Buttons wechseln</li>
          </ul>
        </div>

        <div
          id="{{ form.description.vars.id }}-editor"
          class="event-editor"
          data-mm-editor="tiptap"
          data-textarea-id="{{ form.description.vars.id }}"
          data-editor-label="Beschreibung"
          role="textbox"
          aria-multiline="true"
          aria-labelledby="{{ form.description.vars.id }}-label"
          aria-describedby="{{ form.description.vars.id }}-shortcuts {{ form.description.vars.id }}-counter {{ form.description.vars.id }}-errors"
        ></div>
        <div id="{{ form.description.vars.id }}-counter" class="event-editor-counter" data-mm-editor-counter-for="{{ form.description.vars.id }}" role="status" aria-live="polite"></div>
        {{ form_widget(form.description, { attr: { class: 'js-organization-description-source', rows: 8, 'aria-hidden': 'true', tabindex: '-1' } }) }}
        <div id="{{ form.description.vars.id }}-errors">{{ form_errors(form.description) }}</div>
      </div>

      <fieldset class="widget" aria-describedby="organization-tags-help organization-tags-errors">
        <legend>{{ form.tags.vars.label }}</legend>
        <p id="organization-tags-help" class="event-editor-shortcuts">Mehrfachauswahl möglich. Mit Leertaste ein- und ausschalten.</p>
        <div class="ns-tag-switches">
          {% for tagField in form.tags %}
            {% set tagLabelId = tagField.vars.id ~ '-label' %}
            <div class="ns-tag-switch-item">
              {{ form_widget(tagField, { attr: { 'aria-describedby': tagField.vars.id ~ '-state', 'aria-labelledby': tagLabelId } }) }}
              {{ form_label(tagField, null, { label_attr: { id: tagLabelId } }) }}
              <span
                id="{{ tagField.vars.id }}-state"
                class="visually-hidden"
                data-switch-state-for="{{ tagField.vars.id }}"
              >
                {{ tagField.vars.checked ? 'Ein' : 'Aus' }}
              </span>
            </div>
          {% endfor %}
        </div>
        <div id="organization-tags-errors">{{ form_errors(form.tags) }}</div>
      </fieldset>

      {{ form_row(form.logoUpload) }}

      <div class="actions" aria-label="Formularaktionen">
        <button type="submit" id="save-btn" disabled>Speichern</button>
        <button type="submit" id="save-back-btn" name="save_back" value="1" disabled>Speichern und Zurück</button>
        <a href="{{ backUrl }}" aria-label="Zurück zur vorherigen Seite">Zurück</a>
      </div>
    {{ form_end(form) }}

    <script>
      (function () {
        const tagSwitches = document.querySelectorAll('input.ns-tag-switch-input[role="switch"]');

        const syncSwitchState = (input) => {
          const isChecked = !!input.checked;
          input.setAttribute('aria-checked', isChecked ? 'true' : 'false');

          const stateNode = document.querySelector(`[data-switch-state-for="${input.id}"]`);

          if (stateNode) {
            stateNode.textContent = isChecked ? 'Ein' : 'Aus';
          }
        };

        tagSwitches.forEach((input) => {
          syncSwitchState(input);
          input.addEventListener('change', () => syncSwitchState(input));
        });

        const currentLogoPath = {{ (currentLogoPath is defined and currentLogoPath) ? ('/' ~ currentLogoPath)|json_encode|raw : 'null' }};
        const logoInput = document.querySelector('input.js-logo-upload');
        const removeLogoInput = document.getElementById('remove_logo');
        const hadInitialLogo = !!currentLogoPath;
        let pondDirty = false;

        const form = document.querySelector('form');
        const saveButton = document.getElementById('save-btn');
        const saveBackButton = document.getElementById('save-back-btn');
        if (!form || !saveButton || !saveBackButton) {
          return;
        }

        const initial = new FormData(form);
        const hasChanges = () => {
          const current = new FormData(form);
          for (const [key, value] of current.entries()) {
            if (initial.getAll(key).join(',') !== current.getAll(key).join(',')) {
              return true;
            }
          }
          return false;
        };
        const updateButtons = () => {
          const changed = hasChanges() || pondDirty;
          saveButton.disabled = !changed;
          saveBackButton.disabled = !changed;
        };

        if (logoInput && typeof window.FilePond !== 'undefined') {
          if (typeof window.FilePondPluginImagePreview !== 'undefined') {
            window.FilePond.registerPlugin(window.FilePondPluginImagePreview);
          }
          if (typeof window.FilePondPluginImageResize !== 'undefined') {
            window.FilePond.registerPlugin(window.FilePondPluginImageResize);
          }
          if (typeof window.FilePondPluginImageTransform !== 'undefined') {
            window.FilePond.registerPlugin(window.FilePondPluginImageTransform);
          }

          const filePondOptions = {
            instantUpload: false,
            storeAsFile: true,
            allowMultiple: false,
            allowReplace: true,
            stylePanelAspectRatio: 1,
            styleItemPanelAspectRatio: 1,
            credits: false,
            acceptedFileTypes: ['image/*'],
            allowImageResize: true,
            imageResizeUpscale: false,
            allowImageTransform: true,
            onaddfile: function (error, fileItem) {
              if (error || !fileItem || typeof fileItem.setMetadata !== 'function') {
                return;
              }

              const fileType = fileItem.fileType || (fileItem.file && fileItem.file.type) || '';

              if (fileType === 'image/svg+xml') {
                fileItem.setMetadata('resize', null);
                return;
              }

              fileItem.setMetadata('resize', {
                mode: 'contain',
                upscale: false,
                size: {
                  width: 800,
                  height: 800
                }
              });
            },
            labelIdle: 'Logo hierher ziehen oder <span class="filepond--label-action">durchsuchen</span>'
          };

          if (currentLogoPath) {
            filePondOptions.files = [
              {
                source: currentLogoPath,
                options: {
                  type: 'local'
                }
              }
            ];

            filePondOptions.server = {
              load: (source, load, error, progress, abort) => {
                const xhr = new XMLHttpRequest();
                xhr.open('GET', source);
                xhr.responseType = 'blob';
                xhr.onload = function () {
                  if (xhr.status >= 200 && xhr.status < 300) {
                    load(xhr.response);
                  } else {
                    error('Laden fehlgeschlagen');
                  }
                };
                xhr.onerror = function () {
                  error('Laden fehlgeschlagen');
                };
                xhr.send();

                return {
                  abort: () => {
                    xhr.abort();
                    abort();
                  }
                };
              }
            };
          }

          const pond = window.FilePond.create(logoInput, filePondOptions);

          const syncPondState = () => {
            const files = pond.getFiles();
            const hasLocalFile = files.some((file) => window.FilePond.FileOrigin && file.origin === window.FilePond.FileOrigin.LOCAL);
            const hasNewFile = files.some((file) => window.FilePond.FileOrigin && file.origin !== window.FilePond.FileOrigin.LOCAL);

            pondDirty = hasNewFile || (hadInitialLogo && !hasLocalFile);

            if (removeLogoInput) {
              removeLogoInput.value = hadInitialLogo && !hasLocalFile && !hasNewFile ? '1' : '0';
            }

            updateButtons();
          };

          syncPondState();

          pond.on('removefile', function (error, file) {
            if (error) {
              return;
            }

            syncPondState();
          });

          pond.on('addfile', function () {
            syncPondState();
          });

          pond.on('updatefiles', function () {
            syncPondState();
          });
        }
        form.addEventListener('input', function () {
          updateButtons();
        });
        form.addEventListener('change', function () {
          updateButtons();
        });
      })();
    </script>
  {% else %}
    <p>Kein Formular verfügbar.</p>
  {% endif %}
{% endblock %}