{% comment %}
  Renders numbers visitor random between min and max number.

  Accepts:
  - max: {number} max number (required)
  - min: {number} min number (required)
  - change: {number} changing visitor times (required)
  - text: {string} text to display (required)
  Usage:
  {% render 'visitor', max: max, min: min, change: change %}
{% endcomment %}

<div class='visitor'>
  <div style='display: none'>
    <div id='product-info-visitor-max'>{{ max }}</div>
    <div id='product-info-visitor-min'>{{ min }}</div>
    <div id='product-info-visitor-change'>{{ change }}</div>
  </div>
  <div class='visitor__icon'>
    {% render 'icon', name: 'eye', icon_size: '14' %}
  </div>
  <div class='visitor__text'>
    <span id='product-info-visitor'></span>
    <span> {{ text }} </span>
  </div>
</div>

<script>
  const visitorMax = Number(document.querySelector('#product-info-visitor-max').innerHTML);
  const visitorMin = Number(document.querySelector('#product-info-visitor-min').innerHTML);
  const visitorChange = Number(document.querySelector('#product-info-visitor-change').innerHTML) * 1000;
  const visitor = document.querySelector('#product-info-visitor');
  let startVisitorRandom;
  if (visitorMax >= visitorMin) {
    startVisitorRandom = Math.floor(Math.random() * (visitorMax - visitorMin + 1) + visitorMin);
  } else {
    startVisitorRandom = Math.floor(Math.random() * (visitorMin - visitorMax + 1) + visitorMax);
  }
  visitor.innerHTML = startVisitorRandom;

  function randomVisitor() {
    let visitorRandom;
    if (visitorMax >= visitorMin) {
      visitorRandom = Math.floor(Math.random() * (visitorMax - visitorMin + 1) + visitorMin);
    } else {
      visitorRandom = Math.floor(Math.random() * (visitorMin - visitorMax + 1) + visitorMax);
    }
    visitor.innerHTML = visitorRandom;
  }

  const visitorIntervalId = setInterval(randomVisitor, visitorChange);
</script>
