// using ECMAScript modules:
// https://www.youtube.com/watch?v=BLak5aR4qXw&ab_channel=SteveGriffith-Prof3ssorSt3v3
import data from './cities.mjs';

console.log('cities: ', data.cities);
console.log('🥁');

const distance = 50;

// dom selectors
const hammerPlayground = document.getElementById('hammer');
const display = document.getElementsByClassName('hammer-display')[0];
const slider = document.getElementsByClassName('slider')[0];
let currentPosition = 0;
let initialIndex = 9; // just checked which item is shown after reload
let currentIndex = initialIndex;

function setupHammer() {
  // enabling rotate recognizer (and tap) via the options object
  // https://hammerjs.github.io/api/#hammer-recognizer
  const hammerOptions = {
    recognizers: [[Hammer.Swipe]],
  };
  const mc = new Hammer(hammerPlayground, hammerOptions);

  // listen to tap
  mc.on('swipe', (event) => {
    let deltaX;
    switch (event.direction) {
      case 2:
        // going 'left'
        deltaX = -distance;
        currentIndex++;
        break;
      case 4:
        // going 'right'
        deltaX = distance;
        currentIndex--;
      default:
        break;
    }
    if (currentIndex < 0) {
      currentIndex = 0;
    } else if (currentIndex >= data.cities.length - 1) {
      currentIndex = data.cities.length - 1;
    }

    updateCity(currentIndex);
    panSlider(deltaX);
  });
}

function drawSVG() {
  // creating an svg within the div with id #d3
  const svg = d3.select('#svg');

  const mask = svg
    .select('.slider')
    .selectAll('whatever')
    .data(data.cities)
    .enter()
    .append('circle')
    .attr('cx', function (nodeData, index, group) {
      return index * distance + distance;
    })
    .attr('cy', 411)
    .attr('r', 8)
    .attr('data-name', function (nodeData, index, group) {
      return nodeData.current_city;
    })
    .attr('data-id', function (nodeData, index, group) {
      return index;
    })
    .attr('fill', function (nodeData, index, group) {
      const mappedHSLValue = getValueInRange(
        index,
        0,
        data.cities.length,
        0,
        360
      );
      // Using HSL color values:
      // https://hslpicker.com/#f00
      // just to have some indicator that other city dots are visible
      return `hsla(${mappedHSLValue}, 100%, 50%, 1)`;
    });
}

// https://stackoverflow.com/a/23202637/1121268
// does the same as p5s map() method
function getValueInRange(value, in_min, in_max, out_min, out_max) {
  return ((value - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
}

function updateCity(index) {
  const city = data.cities[index];
  const text = `City: ${city.current_city}`;
  document.getElementById('text').textContent = text;
}

function panSlider(delta) {
  console.log('delta: ', delta);
  let newPosition = currentPosition + delta;

  const maxSlidingPosition =
    data.cities.length * distance - initialIndex * distance - distance;

  // limit the position
  if (newPosition > 9 * distance) {
    newPosition = 9 * distance;
  } else if (newPosition < -maxSlidingPosition) {
    newPosition = -maxSlidingPosition;
  }

  currentPosition = newPosition;
  slider.setAttribute('style', `transform: translateX(${newPosition}px);`);
}

setupHammer();
drawSVG();
