{% extends 'v2_base.html' %}

{% block content %}
<form method="post" id="configForm" data-plans-url="{% url 'plugins:allure_uploader_v2:ui-plans' %}"
    class="py-3">
    <h2 class="py-2">Config Form</h2>
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit" class="btn btn-primary">Save</button>
    <a class="ms-2" href="{% url 'plugins:allure_uploader_v2:config-list' %}">Nevermind</a>
</form>

<script>
    let project_select = $("#id_project")
    let parameter_select = $("#id_parameters")
    let plan_select = $("#id_plan")
    let user_select = $("#id_allowed_users")

    async function fetch_plans() {
        const plan_values = plan_select.val();
        const response = await fetch("{% url 'plugins:allure_uploader_v2:ui-plans' %}?" +
            new URLSearchParams({
                'project': project_select.val()
            }), {
                Method: 'GET',
                headers: {
                    'Accept': 'application/json',
                },
            }
        )
        plan_select[0].selectize.clearOptions(true);
        plan_select[0].selectize.clearOptions(true);
        plan_select[0].selectize.addOption(await response.json());
        if (project_select) {
            plan_select[0].selectize.setValue(plan_values)
        }
    }

    async function fetch_users() {
        const user_values = user_select.val();
        const response = await fetch("{% url 'plugins:allure_uploader_v2:ui-users' %}?" +
            new URLSearchParams({
                'project': project_select.val()
            }), {
                Method: 'GET',
                headers: {
                    'Accept': 'application/json',
                },
            }
        )
        user_select[0].selectize.clearOptions(true);
        user_select[0].selectize.clearOptions(true);
        user_select[0].selectize.addOption(await response.json());
        user_select[0].selectize.setValue(user_values)
    }

    async function fetch_parameters() {
        const plan_values = parameter_select.val();
        const response = await fetch("{% url 'plugins:allure_uploader_v2:ui-parameters' %}?" +
            new URLSearchParams({
                'project': project_select.val()
            }), {
                Method: 'GET',
                headers: {
                    'Accept': 'application/json',
                },
            }
        )
        parameter_select[0].selectize.clearOptions(true);
        parameter_select[0].selectize.clearOptions(true);
        parameter_select[0].selectize.addOption(await response.json());
        if (project_select) {
            parameter_select[0].selectize.setValue(plan_values)
        }
    }


    plan_select.selectize({
        optgroupField: 'parent_title',
        valueField: 'id',
        labelField: 'title',
        searchField: 'title',
        optionGroupRegister: function (optgroup) {
            var group = {
                label: optgroup
            };
            group[this.settings.optgroupValueField] = optgroup;
            return group;
        },
        create: false
    });
    parameter_select.selectize({
        optgroupField: 'group_name',
        maxItems: null,
        valueField: 'id',
        labelField: 'title',
        searchField: 'title',
        optionGroupRegister: function (optgroup) {
            var group = {
                label: optgroup
            };
            group[this.settings.optgroupValueField] = optgroup;
            return group;
        },
        create: false
    });
    user_select.selectize({
        valueField: 'id',
        labelField: 'username',
        searchField: 'username',
        optionGroupRegister: function (optgroup) {
            var group = {
                label: optgroup
            };
            group[this.settings.optgroupValueField] = optgroup;
            return group;
        },
        create: false
    });
    if (project_select.val()) {
        fetch_plans();
        fetch_parameters();
    }
    project_select.change(fetch_plans).change(fetch_parameters)
    fetch_users();
</script>
{% endblock %}