{% block styles %}

    <style>
        .error-flash {
            color: red;
        }
    </style>
    <link href="https://cdn.syncfusion.com/ej2/22.2.5/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.syncfusion.com/ej2/22.2.5/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.syncfusion.com/ej2/22.2.5/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.syncfusion.com/ej2/22.2.5/ej2-navigations/styles/material.css" rel="stylesheet" type="text/css" />
 {% endblock %}

{% block javascript %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.2/socket.io.js"></script>
{% endblock %}

 {% block content %}

  <style>
    .progressbar-example {
      height: auto !important;
      width: 50% !important;
      padding: 10px;
      margin: 10px;
    }
      .form-check.form-switch.btn-inf {
    padding-left: 55px;
    }
      .install_message_block {
      padding-left: 22px;
      }
  </style>

  <div style="display: flex; height: 75vh;">
    <!-- Progressbar -->
    <div id="container" class="progressbar-example">
      <h2>Встановлення компоненти {{component_name}}</h2>
        <br/>
      <div class="row linear-parent">
        <div id="linearTheme" class="linear-progress"></div>
<!--        <div id="circularTheme" class="linear-progress"></div>-->
          <div class="install_message_block">
           <div id="install_message"></div>
            <br/>
          </div>
        <div class="row row-cols-md-auto align-items-center">
        </div>

      </div>


    </div>
 <!-- Progressbar -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.syncfusion.com/ej2/18.2.47/dist/ej2.min.js"></script>

    <script>
        var socketProtocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
	    var socket = io.connect(socketProtocol + document.domain + ':' + location.port); //{ transports: ['websocket']}
        var linearThemeProgress;
        const installComments = document.getElementById('install_message');
        var dataFile = '';



      socket.on('update_progress', function (data) {

        if (data.progress === 100) {
            // If progress is 100%, redirect to "/components-list"
            window.location.href = '/components-list';
        }

        if (data.error) {
        // Виникла помилка, зупиняємо прогресбар і виводимо повідомлення про помилку
        endProcess();
        if (data.file){
        dataFile = data.file;
        }
        installComments.style.color = 'red';
        installComments.innerText = data.install_message + ': ' + data.error + ': ' + dataFile;
        }
        else {
        updateProgressBar(data.progress);
        if (data.message) {
            //processButton.innerText = data.message;
            installComments.innerText = data.install_message;
        }
    }
      });


     document.addEventListener('DOMContentLoaded', function () {
     startProcess();


      linearThemeProgress = new ej.progressbar.ProgressBar({
          type: 'Linear',
          height: '60',
          width: '100%',
          value: 0,
          secondaryProgress: 0,
          trackThickness: 24,
          progressThickness: 24,
          theme: 'HighContrast',
          animation: {
            enable: true,
            duration: 2000,
            delay: 0
          }

        });

        linearThemeProgress.appendTo('#linearTheme');
        });

      function startProcess() {

        socket.emit('install_components_pr', { component_id: '{{ component_id }}',  component_name: '{{ component_name }}', make_migration_value : true });
      }

      function endProcess() {
        if (linearThemeProgress) {
            // Зупиняємо прогресбар
            linearThemeProgress = null;
            socket.close();
        }
        }

      function updateProgressBar(value) {
        linearThemeProgress.setProperties({ value: value });
        if (value == 100 ) {
        endProcess();
        }
      }
    </script>

{% endblock %}