{% import '_includes/forms' as forms %}
{% import 'verbb-base/_macros' as macros %}

{% if groupedIntegrations %}
    <div class="fui-integrations-pane">
        <div class="fui-integrations-sidebar-wrapper">
            <div class="sidebar">
                <nav class="fui-integrations-tabs" data-vui-tabs>
                    <ul>
                        {% for name, integrations in groupedIntegrations %}
                            <li class="heading"><span>{{ name }}</span></li>

                            {% for integration in integrations %}
                                {% set handle = integration.getHandle() %}
                                {% set selectedItem = loop.first and loop.parent.loop.first ? true : false %}

                                <li>
                                    <a id="tab-{{ loop.index }}" href="#tab-{{ handle }}" class="tab {% if selectedItem %}sel{% endif %}" :class="{ 'error': !isEmpty(get(form, 'settings.integrations.{{ handle }}.errors')) }" data-integration="{{ handle }}">
                                        {% if integration.iconUrl %}
                                            <img class="formie-integration-icon" src="{{ integration.iconUrl }}">
                                        {% else %}
                                            <img class="formie-integration-icon" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E">
                                        {% endif %}

                                        <span class="label">{{ integration.getName() }}</span>

                                        {% set enabled = form.settings.integrations[handle].enabled ?? false %}

                                        {% if enabled %}
                                            <span class="status on"></span>
                                        {% else %}
                                            <span class="status disabled"></span>
                                        {% endif %}
                                    </a>
                                </li>
                            {% endfor %}
                        {% endfor %}
                    </ul>
                </nav>
            </div>
        </div>

        <div class="fui-form-integrations-wrapper">
            <div class="fui-form-integrations-inner-wrapper">
                {% for integrations in groupedIntegrations %}
                    {% for integration in integrations %}
                        {% set selectedItem = loop.first and loop.parent.loop.first ? true : false %}
                        {% set handle = integration.getHandle() %}

                        <div id="tab-{{ handle }}" class="integration-pane {% if not selectedItem %}hidden{% endif %}">
                            <h2>{{ integration.getName() }}</h2>

                            {{ integration.getDescription() | md }}

                            <hr>

                            {% namespace 'settings[integrations][' ~ handle ~ ']' %}
                                {% set enabled = form.settings.integrations[handle].enabled ?? false %}
                                
                                {{ forms.lightswitchField({
                                    label: 'Enabled' | t('formie'),
                                    instructions: 'Whether this integration should be enabled.' | t('formie'),
                                    name: 'enabled',
                                    on: enabled,
                                    toggle: 'integration-enabled',
                                    containerAttributes: {
                                        'data-integration': handle,
                                    },
                                }) }}

                                {{ integration.getFormSettingsHtml(form) | raw }}
                            {% endnamespace %}
                        </div>
                    {% endfor %}
                {% endfor %}
            </div>
        </div>
    </div>
{% else %}
    <div class="zilch">
        {{ 'No integrations available.' | t('formie') }}
    </div>
{% endif %}

{% js %}

$('[data-vui-tabs] a:first').addClass('sel');

$(document).on('click', '[data-vui-tabs] a', function(e) {
    e.preventDefault();

    var href = $(this).attr('href');
    var $pane = $(href);

    $(this).parents('[data-vui-tabs]').find('a').removeClass('sel');
    $(this).addClass('sel');

    if ($pane) {
        $('.integration-pane').addClass('hidden');

        $pane.removeClass('hidden');
    }
});

$('[data-target="integration-enabled"]').each(function(index, element) {
    $(element).on('click', function(e) {
        var $lightswitch = $(e.currentTarget);
        var lightswitch = $lightswitch.data('lightswitch');

        if (lightswitch) {
            var handle = $lightswitch.data('integration');

            if (lightswitch.on) {
                $('.tab[data-integration="' + handle + '"] .status').addClass('on').removeClass('disabled');
            } else {
                $('.tab[data-integration="' + handle + '"] .status').removeClass('on').addClass('disabled');
            }
        }
    });
});

{% endjs %}