{% extends 'base.html.twig' %}

{% set bodyClass = 'admin_duplication duplicate' %}
{% set menuItem = 'admin_duplication' %}

{% block title %}{{ 'admin.duplication.title.duplicate'|trans }} - {{ parent() }}{% endblock %}

{% block body_head %}
    <h1>{{ 'admin.duplication.title.duplicate'|trans }}</h1>
{% endblock %}

{% block breadcrumb %}
    {% set breadcrumb = [
        { 'name': 'admin.duplication.breadcrumb.duplicate'|trans }
    ] %}
    {% include '_breadcrumb.html.twig' with {'breadcrumb': breadcrumb} %}
{% endblock %}

{% block body %}

<div class="row">
    <div class="col-xs-12">
        {# Warning message #}
        <div role="status" id="duplication-status-flashbag" class="alert alert-warning">
            <p><i aria-hidden="true" class="icon fa fa-spinner"></i><strong>{{ 'admin.duplication.flashbag.warning.duplicate_in_progress'|trans }}</strong></p>
            <p>{{ 'admin.duplication.flashbag.warning.progress_warning'|trans }}</p>
        </div>
    </div>
</div>

<div class="row">

    {# LEFT #}
    <div class="col-md-6">
        {# SOURCE DATA #}
        <div class="box box-solid box-default">
            <div class="box-header with-border"><h3 class="box-title">{{ 'admin.duplication.tab.source'|trans }}</h3></div>
            <div class="box-body no-padding">
                <table role="presentation" class="table">
                    <tbody>
                        <tr>
                            <td><strong>{{ 'admin.duplication.label.type'|trans }}</strong></td>
                            <td>{{ duplication.type|dictionary('admin_duplication_type') }}</td>
                        </tr>
                        <tr>
                            <td><strong>{{ 'admin.duplication.label.source_organization'|trans }}</strong></td>
                            <td>{{ duplication.sourceCollectivity }}</td>
                        </tr>
                        <tr>
                            <td><strong>{{ 'admin.duplication.label.data'|trans }}</strong></td>
                            <td>
                                <ul>
                                    {% for item in duplication.data %}
                                        <li>{{ item }}</li>
                                    {% endfor %}
                                </ul>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {# RIGHT #}
    <div class="col-md-6">
        {# TARGET DATA #}
        <div class="box box-solid box-default">
            <div class="box-header with-border"><h3 class="box-title">{{ 'admin.duplication.tab.target'|trans }}</h3></div>
            <div class="box-body no-padding">
                <table class="table table-striped">
                    <caption class="sr-only">{{ 'admin.duplication.tab.target'|trans }}</caption>
                    <thead>
                        <tr>
                            <th scope="col">{{ 'global.label.organization'|trans }}</th>
                            <th scope="col">{{ 'admin.duplication.label.progress'|trans }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for collectivity in duplication.targetCollectivities %}
                            <tr id="collectivity-{{ collectivity.id }}">
                                <th scope="row">{{ collectivity }}</th>
                                <td class="duplication-status">{# Content will be added dynamically thanks to JS #}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    <script>
        // ALERT POP UP
        // Show alert popup when we wanna close tab
        const loadAlertPopupOnClosing = () => window.onbeforeunload = () => "Êtes-vous certain de vouloir fermer cet onglet ?";
        // Disable alert popup when we wanna close tab
        const unloadAlertPopupOnClosing = () => window.onbeforeunload = () => {};

        // MAKE DUPLICATION
        // Create new promise which will request duplication
        const getAjaxDuplicationPromise = (duplicationId, targetCollectivityId) => {
            showRowProcess(targetCollectivityId);

            return new Promise((resolve, reject) => {
                let url = '{{ path('api_admin_duplication_duplicate', { duplicationId: 'duplicationIdValue', targetCollectivityId: 'targetCollectivityIdValue' }) }}'
                    .replace('duplicationIdValue', duplicationId)
                    .replace('targetCollectivityIdValue', targetCollectivityId);

                $.ajax({
                    url: url,
                    method: 'POST',
                    success: function(data, textStatus, jqXHR) {
                        resolve(targetCollectivityId);
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        reject(targetCollectivityId);
                    },
                });
            });
        };

        // ROW STATUS UPDATES
        const showRowProcess = (collectivityId) => $(`#collectivity-${collectivityId} .duplication-status`).html('<span class="badge bg-yellow">{{ 'admin.duplication.label.in_progress'|trans }}</span>');
        const showRowSuccess = (collectivityId) => $(`#collectivity-${collectivityId} .duplication-status`).html('<span class="badge bg-green">{{ 'admin.duplication.label.duplicate'|trans }}</span>');
        const showRowError = (collectivityId) => $(`#collectivity-${collectivityId} .duplication-status`).html('<span class="badge bg-red">{{ 'admin.duplication.label.error'|trans }}</span>');

        // Pipe actions to handle when every duplication queries are done
        const handleCompleteDuplication = () => {
            unloadAlertPopupOnClosing();
            showEndingFlashbag();
        };

        // Update Flashbag to show duplication ending
        const showEndingFlashbag = () => {
            let flashbag = $('#duplication-status-flashbag');
            flashbag.hasClass('alert-warning') && flashbag.removeClass('alert-warning');
            flashbag.addClass('alert-success');
            flashbag.html('<i aria-hidden="true" class="icon fa fa-check"></i>{{ 'admin.duplication.flashbag.success.duplicate_end'|trans }}');
        };

        $(document).ready(function() {

            // TWIG DATA CONVERTION
            const duplicationId = '{{ duplication.id }}';

            let targetCollectivities = [];
            {% for duplicatedObject in duplication.duplicatedObjects.toArray %}
                var found = false;
                targetCollectivities.forEach((element) => {
                    if (element['id'] == '{{ duplicatedObject.collectivity.id }}') {
                        found = true;
                    }
                });
                if (!found) {
                    targetCollectivities.push({
                        'id': '{{ duplicatedObject.collectivity.id }}',
                        'name': '{{ duplicatedObject.collectivity.name }}',
                    });
                }

            {% endfor %}

            // JAVASCRIPT PROCESSING
            loadAlertPopupOnClosing();
            const nbConcurrency = 5;

            // Split collectivities for concurrency
            const splittedCollectivities = splitEvery(nbConcurrency)(targetCollectivities);

            // In order to make every duplication per collectivity via AJAX calls, we use Promises
            // To avoid timeout issues, we make some concurrency (nbConcurrency)
            // and run a maximum of nbConcurrency calls at the same time
            //
            // e.g. if we got duplications to make on 7 collectivities with a `nbConcurrency = 3`,
            // We will run 3 ajax calls simultaneously, then 3 others and finally the last collectivity
            const promise = splittedCollectivities
                .reduce((accumulator, targetCollectivities) =>
                    accumulator.then(() => Promise.all(targetCollectivitiesObjectsToPromises(duplicationId, targetCollectivities))),
                    Promise.resolve()
                )
            ;
            promise.then(handleCompleteDuplication)
        });

        // targetCollectivitiesObjectsToPromises :: [Object] -> [Promise]
        const targetCollectivitiesObjectsToPromises = (duplicationId, targetCollectivities) =>
            targetCollectivities
                .map(targetCollectivity =>
                    getAjaxDuplicationPromise(duplicationId, targetCollectivity.id)
                        .then(showRowSuccess, showRowError)
        );

        /*
         splitEvery :: Number -> Array -> Array
         Split array into several little array (size of theirs arrays if `nbBySplit`)
         */
        const splitEvery = nbBySplit => arr => {
            let chunks = [];
            let i = 0;
            let n = arr.length;

            while (i < n) {
                chunks.push(arr.slice(i, i += nbBySplit));
            }

            return chunks;
        };
    </script>
{% endblock %}