{% extends "wagtailadmin/generic/create.html" %}
{% load wagtailadmin_tags %}

{% block visible_fields %}
    <li>{% formattedfield form.is_synced %}</li>
    <li data-sync-field="name">{% formattedfield form.name %}</li>
    <li data-sync-field="sync_type" hidden>{% formattedfield form.sync_type %}</li>
    {% for key, sync_form in sync_forms.items %}
        <li data-sync-type-fields="{{ key }}" hidden>
            <ul class="fields">
                {% for field in sync_form.visible_fields %}
                    <li>{% formattedfield field %}</li>
                {% endfor %}
            </ul>
            <div class="help-block help-info"
                 data-existing-synced-groups-message="{{ key }}"
                 hidden>
                <svg class="icon icon-help icon" aria-hidden="true">
                    <use href="#icon-help"></use>
                </svg>
                <div data-existing-synced-groups-content></div>
            </div>
        </li>
    {% endfor %}
{% endblock visible_fields %}

{% block extra_js %}
    {{ block.super }}
    <script>
        (function () {
            function init() {
                var isSyncedCheckbox = document.getElementById("id_is_synced");
                var syncTypeField = document.querySelector('[data-sync-field="sync_type"]');
                var nameField = document.querySelector('[data-sync-field="name"]');
                var typeSelect = document.getElementById("id_sync_type");
                var typeFieldSets = document.querySelectorAll("[data-sync-type-fields]");
                var syncNameByType = {{ sync_name_by_type_json|default:"{}"|safe }};
                var syncSourceFieldByType = {{ sync_source_field_by_type_json|default:"{}"|safe }};
                var existingSyncedGroupsUrl = "{{ existing_synced_groups_url|default:'' }}";

                function updateVisibility() {
                    var isSynced = !!(isSyncedCheckbox && isSyncedCheckbox.checked);
                    var selectedType = typeSelect ? typeSelect.value : "";

                    if (syncTypeField) {
                        syncTypeField.hidden = !isSynced;
                    }

                    typeFieldSets.forEach(function (fieldSet) {
                        var type = fieldSet.getAttribute("data-sync-type-fields");
                        fieldSet.hidden = !(isSynced && type === selectedType);
                    });

                    if (nameField) {
                        nameField.hidden = isSynced && !!syncNameByType[selectedType];
                    }
                }

                function renderExistingGroupsMessage(type, data) {
                    var messageEl = document.querySelector(
                        '[data-existing-synced-groups-message="' + type + '"]'
                    );
                    if (!messageEl) {
                        return;
                    }
                    var contentEl = messageEl.querySelector(
                        "[data-existing-synced-groups-content]"
                    );
                    contentEl.textContent = "";
                    if (!data || !data.groups || !data.groups.length) {
                        messageEl.hidden = true;
                        return;
                    }

                    var heading = document.createElement("p");
                    heading.textContent =
                        "Synchronized groups already exist for " +
                        data.source_type +
                        " '" +
                        data.source +
                        "':";
                    contentEl.appendChild(heading);

                    var list = document.createElement("ul");
                    data.groups.forEach(function (group) {
                        var item = document.createElement("li");
                        var link = document.createElement("a");
                        link.href = group.url;
                        link.target = "_blank";
                        link.rel = "noopener noreferrer";
                        link.textContent = group.name;
                        item.appendChild(link);
                        list.appendChild(item);
                    });
                    contentEl.appendChild(list);
                    messageEl.hidden = false;
                }

                function checkExistingGroups(type, sourceValue) {
                    var messageEl = document.querySelector(
                        '[data-existing-synced-groups-message="' + type + '"]'
                    );
                    if (messageEl) {
                        messageEl.hidden = true;
                    }

                    if (!existingSyncedGroupsUrl || !sourceValue) {
                        return;
                    }

                    var url =
                        existingSyncedGroupsUrl +
                        "?sync_type=" +
                        encodeURIComponent(type) +
                        "&source=" +
                        encodeURIComponent(sourceValue);

                    fetch(url, { headers: { "X-Requested-With": "XMLHttpRequest" } })
                        .then(function (response) {
                            return response.ok ? response.json() : null;
                        })
                        .then(function (data) {
                            renderExistingGroupsMessage(type, data);
                        });
                }

                function bindSourceFieldListeners() {
                    Object.keys(syncSourceFieldByType).forEach(function (type) {
                        var sourceField = syncSourceFieldByType[type];
                        if (!sourceField) {
                            return;
                        }
                        var input = document.getElementById(
                            "id_" + type + "-" + sourceField
                        );
                        if (!input) {
                            return;
                        }
                        input.addEventListener("change", function () {
                            checkExistingGroups(type, input.value);
                        });
                    });
                }

                if (isSyncedCheckbox) {
                    isSyncedCheckbox.addEventListener("change", updateVisibility);
                }
                if (typeSelect) {
                    typeSelect.addEventListener("change", updateVisibility);
                }
                updateVisibility();
                bindSourceFieldListeners();
            }

            // The fields this script queries for are rendered further down the page
            // than this script tag, so the DOM must have finished parsing first.
            if (document.readyState === "loading") {
                document.addEventListener("DOMContentLoaded", init);
            } else {
                init();
            }
        })();
    </script>
{% endblock extra_js %}