console.clear();

// currated generateColorRamp options for RampenSau
// fine-time them here until you like it: https://meodai.github.io/rampensau/
const newOptions = () => ({
  total: 2 + Math.round(Math.random() * 4),
  hStart: Math.random() * 360,
  hCycles: -1.25 + Math.random() * 2.5,
  sRange: [
    .2 + Math.random() * .4, 
    .25 + Math.random() * .7
  ],
  sEasing: x => Math.pow(x, 2),
  lRange: [
    Math.random() * .4, 
    Math.random() < .5 ? // half of the palettes will become pretty bright
    .65 + Math.random() * .35 : 
    .98 + Math.random() * .02,
  ],
  lEasing: x => Math.pow(x, 1.25),
});

const createPalette = ({cMod = 1, mode = 'oklch'} = {}) => {
  // invoke the function with the random options
  const options = newOptions();
  const colors = rampensau.generateColorRamp(options);
  
  let cssColors;
  // sometimes we want oklch colors sometimes hsl, why you ask? Because we can
  if ( mode === 'oklch' ) {
    // turn the array returned by RampenSau into something your browser understands
    cssColors = colors.map(color => `oklch(${color[2]} ${color[1] * cMod * 100}% ${color[0]})`);
  } else if ( mode === 'hsl') {
    cssColors = colors.map(color => `hsl(${color[0]} ${color[1] * cMod * 100}% ${color[2] * 100}%)`);
  }
  
  const $code = document.createElement('code');
  $code.innerHTML = `generateColorRamp(${JSON.stringify(options, null, 2)}).map(c =>
    ${mode === 'oklch' ? '"oklch(${c[2]} ${c[1] * ' + (cMod * 100) + '}% ${c[0]})"' : '"hsl(${c[0]} ${c[1] * ' + cMod * 100 + '}% ${c[2] * 100}%)"'}
  )`;
  

  // build the little sample HTML color things
  const $w = document.createElement('div');
  $w.appendChild($code);
  
  $w.classList.add(`palette--${~~(Math.random() * 5)}`);
  $w.classList.add('palette');
  $w.style.setProperty('--gc', cssColors.join());
  $w.style.setProperty('--gs', cssColors.map((c,i) => `${c} ${(i/colors.length) * 100}%, ${c} ${(i+1)/colors.length * 100}%`).join());
  $w.style.setProperty('--crnd', cssColors[~~(cssColors.length * Math.random())]);
  $w.style.setProperty('--crnd2', cssColors[~~(cssColors.length * Math.random())]);
  
  $w.dataset.cls = cssColors.join();
  
  cssColors.forEach((color, i) => {
    $w.style.setProperty(`--c${i}`, color);
    
    const $swatch = document.createElement('div');
    
    $swatch.style.setProperty(`--ri`, i/(cssColors.length - 1));
    $swatch.classList.add('palette__swatch');
    $swatch.style.setProperty('--color', color);

    $w.appendChild($swatch);
  });
  
  return $w;
}

const $b = document.querySelector('[data-colors]');

const np = () => {
  $b.innerHTML = '';
  new Array(1000).fill(0).forEach(_ => {
    $b.appendChild(createPalette(
      {
        // randomly clamp the chroma / saturation half ot the time
        cMod: Math.random() < .5 ? 1 : .5 * Math.random() + .5,
        // 10% will be hsl the others oklch
        mode: Math.random() < .1 ? 'hsl' : 'oklch',
      }
    ))
  })
}

np();

document.documentElement.addEventListener('click', e => {
  const $t = e.target; 
  if ( $t.matches('.palette') ) {
    console.log( $t.querySelector('code').innerHTML )
    logColors( $t.dataset.cls.split(',') );
  }
});

document.querySelector('[data-new]').addEventListener('click', np);

document.addEventListener('keyup', event => {
  if (event.key === 'n') {
    np()
  }
});

function logColors (colors) {
  let c, o = "",
    s = [];
  for (c of colors) {
    o += `%c ✦`,
    s.push(`background: ${c}; color: ${c}`);
  }
  console.log(o, ...s);
};