/*
 * Height alignment utility using ResizeObserver
 */
class HeightSync {
  constructor() {
    this.reset();
  }
  recalcHeights(groupKey) {
      const els = this.registry[groupKey]?.els;
      if (!els || !els.length) return;

      // Calculate max height and update spacers
      let maxHeight = 0;
      for (const { el, spacer } of els) {
          const curr = el.clientHeight - (spacer.clientHeight || 0);
          if (curr > maxHeight) {
              maxHeight = curr;
          }
      }
      for (const { el, spacer } of els) {
          const curr = el.clientHeight - (spacer.clientHeight || 0);
          const newSpacer = maxHeight - curr;
          spacer.style.height = newSpacer + 'px';
      }
  }
  registerHeightSync(el, groupKey = '_') {
      if (!el) return;

      let spacer = el.querySelector(`div.height-sync`);
      if (!spacer) {
          spacer = document.createElement('div');
          spacer.classList.add('height-sync');
          el.append(spacer);
      }

      this.registry[groupKey] = this.registry[groupKey] || {
          els: [],
          recalc: () => this.recalcHeights(groupKey),
      };
      this.registry[groupKey].els.push({
          el,
          spacer,
      });
      this.registry._lookup.set(el, groupKey);
      this.resizeObserver.observe(el);
  }
  reset() {
    this.registry = {
      _lookup: new Map(),
    };
    this.resizeObserver = new ResizeObserver((entries) => {
        const targetKeys = new Set(
            entries.map((entry) => this.registry._lookup.get(entry.target))
        );
        targetKeys.forEach((groupKey) => this.registry[groupKey]?.recalc());
    });
  }
}

/*
 * Utility usage demo
 */
const config = {
  cardCt: 3,
  sectionBaseHeights: [40, 40, 35],
  sectionRandHeight: 50,
  colors: [
    '#4285F4',
    '#DB4437',
    '#F4B400',
    '#0F9D58',
  ],
  alignToggled: false,
  visToggled: false,
}

const alignBtn = document.querySelector('.align-button');
const visBtn = document.querySelector('.spacer-vis-button');
const randomizeBtn = document.querySelector('.randomize-button');
const addBtn = document.querySelector('.add-card-button');
const cardsEl = document.querySelector('.cards');
const heightSync = new HeightSync();
init();

function init() {
  bindEvents();
  renderCards();
  updateSpacerBtnDisabled();
}

function bindEvents() {
  alignBtn.addEventListener("click", handleAlignClick);
  visBtn.addEventListener("click", handleSpacerVisClick);
  randomizeBtn.addEventListener("click", handleRandomizeClick);
  addBtn.addEventListener("click", handleAddCardClick);
}

function renderCards() {
  cardsEl.innerHTML = '';
  shuffle(config.colors);
  
  for (let i = 0; i < config.cardCt; i++) {
    renderCard(cardsEl);
  }
}

function renderCard(hostEl) {
    const card = document.createElement("div");
    card.classList.add("card");
  
    hostEl.append(card);

    for (let i = 0; i < config.sectionBaseHeights.length; i++) {
      const section = document.createElement("div");
      const sectionContent = document.createElement("div");
      sectionContent.style.height =
        (config.sectionBaseHeights[i] + randomInt(0, config.sectionRandHeight)) + 'px';
      section.append(sectionContent);
      section.style.backgroundColor = config.colors[i];
      section.classList.add("card-section");
      card.append(section);
      heightSync.registerHeightSync(section, 'section-' + i);
    }
  
    !config.alignToggled && toggleSpacersFlat(card);
    config.visToggled && toggleSpacerVisibility(card);
}

function handleAddCardClick(e) {
  renderCard(cardsEl);
}

function handleAlignClick(e) {
  config.alignToggled = !config.alignToggled;
  updateSpacerBtnDisabled();
  toggleSpacersFlat();
}

function updateSpacerBtnDisabled() {
  if (!config.alignToggled) {
    visBtn.classList.add('disabled');
  } else {
    visBtn.classList.remove('disabled');
  }
}

function toggleSpacersFlat(scope) {
  const spacers = (scope || document).querySelectorAll('.height-sync');
  spacers.forEach(sp => sp.classList.toggle('flatten'));
}

function handleSpacerVisClick(e) {
  config.visToggled = !config.visToggled;
  toggleSpacerVisibility();
}

function toggleSpacerVisibility(scope) {
  const spacers = (scope || document).querySelectorAll('.height-sync');
  spacers.forEach(sp => sp.classList.toggle('spacer-vis'));
} 

function handleRandomizeClick(e) {
  renderCards();
}

function shuffle(array) {
  for (var i = array.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var temp = array[i];
      array[i] = array[j];
      array[j] = temp;
  }
}

function randomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}