import { getHarmonies, hslToHex } from './converter.js';
import { state } from './app.js';

function renderHarmony(label, colors, onSaveFavorit, onSaveSchema) {
  const row = document.createElement('div');
  row.className = 'harmony-row';

  const heading = document.createElement('h3');
  heading.textContent = label;
  row.appendChild(heading);

  const swatchesDiv = document.createElement('div');
  swatchesDiv.className = 'harmony-swatches';

  colors.forEach(hsl => {
    const hex = hslToHex(hsl);

    const div = document.createElement('div');
    div.className = 'harmony-swatch';

    const swatch = document.createElement('div');
    swatch.className = 'swatch';
    swatch.style.background = hex;
    swatch.title = hex;

    const hexLabel = document.createElement('span');
    hexLabel.textContent = hex;

    const btnRow = document.createElement('div');
    btnRow.className = 'harmony-btn-row';

    const favBtn = document.createElement('button');
    favBtn.className = 'action-btn';
    favBtn.textContent = 'Fav';
    favBtn.style.fontSize = '0.7rem';
    favBtn.addEventListener('click', () => onSaveFavorit(hsl));

    const schemaBtn = document.createElement('button');
    schemaBtn.className = 'action-btn';
    schemaBtn.textContent = '+Schema';
    schemaBtn.style.fontSize = '0.7rem';
    schemaBtn.addEventListener('click', () => onSaveSchema(hsl));

    btnRow.appendChild(favBtn);
    btnRow.appendChild(schemaBtn);

    div.appendChild(swatch);
    div.appendChild(hexLabel);
    div.appendChild(btnRow);
    swatchesDiv.appendChild(div);
  });

  row.appendChild(swatchesDiv);
  return row;
}

function render(onSaveFavorit, onSaveSchema) {
  const hsl = state.color;
  const hex = hslToHex(hsl);

  document.getElementById('harmonien-base-hex').textContent = hex;
  document.getElementById('harmonien-base-preview').style.background = hex;

  const grid = document.getElementById('harmonien-grid');
  grid.textContent = '';

  const h = getHarmonies(hsl);
  grid.appendChild(renderHarmony('Komplementar', h.komplementaer, onSaveFavorit, onSaveSchema));
  grid.appendChild(renderHarmony('Analog', h.analog, onSaveFavorit, onSaveSchema));
  grid.appendChild(renderHarmony('Triade', h.triade, onSaveFavorit, onSaveSchema));
  grid.appendChild(renderHarmony('Split-Komplementar', h.splitKomplementaer, onSaveFavorit, onSaveSchema));
}

export function initHarmonien(onSaveFavorit, onSaveSchema) {
  document.addEventListener('colorChanged', () => render(onSaveFavorit, onSaveSchema));
  render(onSaveFavorit, onSaveSchema);
}