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

{% block title %}Kinow - Importer une Semaine{% endblock %}

{% set INPUT_MOVIE_PLACEHOLDER = 'ID Kinow du Film' %}

{% block css %}
  <style type="text/css">
    .alert-success h3{
        display: inline-block;
    }
    .alert-success p {
        display: inline-block;
        margin: 0 10px 0 10px;
    }
  </style>
{% endblock %}
{% block content %}
  <h1>Kinow</h1>
  <h2>Importer une Semaine</h2>
  <form action="{{ path_for('post_kinow_week', {week: KINOW_WEEK_PLACEHOLDER}) }}" method="POST">
    <div class="form-group">
      <div class="input-group mb-3">
        <input type="number" min="1" value="{{ currentWeek }}" class="form-control" id="week-form-week" name="week" placeholder="Semaine à importer">
        <div class="input-group-append">
          <button type="submit" class="btn btn-primary">Importer</button>
        </div>
      </div>
    </div>
    <div class="alert mt-3 invisible"></div>
  </form>
  <table id="pick-movies" class="table table-striped invisible">
    <thead class="thead-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Titre</th>
        <th scope="col">Importer ?</th>
      </tr>
    </thead>
    <tbody>
      <tr class="clone">
        <td></td>
        <td></td>
        <td>
          <input type="checkbox" value="" checked="true" />
        </td>
      </tr>
    </tbody>
  </table>
  <button type="button" id="import-btn" class="btn btn-success btn-block invisible">
    Importer
  </button>
  <div class="alert clone mt-3 invisible"></div>
{% endblock %}

{% block js %}
  <script type="text/JavaScript">
    function alertImport(id, type, success, info) {
      let alert = $('.alert.clone').clone();
      const text = `<p><strong>#${id}</strong> => <strong>${type}</strong></p>`;
      if (success) {
        alert.addClass('alert-success');
        alert.html(`<h3>Succès</h3>${text}${info} éléments ont été importés`);
      } else {
        alert.addClass('alert-danger');
        alert.html(`<h3>Échec</h3>${text}${info}`);
      }
      alert.removeClass('invisible');
      alert.removeClass('clone');
      $('.alert:last-child').after(alert);
    }
    $('#import-btn').click(function() {
      $('.alert:not(.clone)').remove();
      const pickedMovies = $('#pick-movies')
        .find('tr:not(.clone) input[type=checkbox]:checked')
        .map(function() {
          return parseInt($(this).val());
        }).toArray().filter(id => id > 0);
      pickedMovies.forEach(id => {
        const urlInfos = ['film', 'auteur-trice-s', 'catégories', 'vidéos', 'statistiques'];
        [
          '{{ path_for('post_kinow_movie', {id: KINOW_ID_PLACEHOLDER}) }}',
          '{{ path_for('post_kinow_movie_authors', {id: KINOW_ID_PLACEHOLDER}) }}',
          '{{ path_for('post_kinow_movie_categories', {id: KINOW_ID_PLACEHOLDER}) }}',
          '{{ path_for('post_kinow_movie_videos', {id: KINOW_ID_PLACEHOLDER}) }}',
          '{{ path_for('post_kinow_movie_videos_stats', {id: KINOW_ID_PLACEHOLDER}) }}'
        ].forEach((baseUrl, index) => {
          const url = kinowUrl(baseUrl, [{name: 'id', value: id}]);
          $.post(url, function(data) {
            //console.log({data});
            if (data.success) {
              alertImport(id, urlInfos[index], true, data.processed);
            } else {
              alertImport(id, urlInfos[index], false, data.error.message);
            }
          }).fail(function(err) {
            //console.log({err});
            alertImport(id, urlInfos[index], false, err.statusText);
          });
        });
      });
    });
    $('form').submit(function(event) {
      event.preventDefault();
      event.stopPropagation();
      const url = kinowUrl(
        $(this).attr('action'),
        $(this).serializeArray()
      );
      $.post(url, function(data) {
        //console.log(data);
        if (!data.success || data.movies.length < 1) {
          return;
        }
        const pickMovies = $('#pick-movies');
        const toClone = pickMovies.find('tr.clone');
        toClone.show();
        pickMovies.find('tbody tr:not(.clone)').remove();
        data.movies.forEach(movie => {
          let movieLine = toClone.clone();
          toClone.after(movieLine);
          movieLine.find('td:nth-child(1)').text(movie.id);
          movieLine.find('td:nth-child(2)').text(movie.title);
          movieLine.find('td:nth-child(3) input[type=checkbox]').val(movie.id);
          movieLine.removeClass('clone');
        });
        toClone.hide();
        pickMovies.removeClass('invisible');
        $('#import-btn').removeClass('invisible');
      });
    });
  </script>
{% endblock %}