const panel = document.getElementById('pattern');

const preset = document.getElementById('pattern-preset');
const patternLength = document.getElementById('pattern-len');
const steps = panel.querySelector('.steps');

let length = 12;
let pattern = [0, 2, 4, 5, 7, 9, 11];

const PRESETS = {
  'major-7': [0, 2, 4, 5, 7, 9, 11],
  'minor-7': [0, 2, 3, 5, 7, 8, 10],
  'minor-harm-7': [0, 2, 3, 5, 7, 8, 11],
  'minor-mel-7': [0, 2, 3, 5, 7, 9, 11],
  'minor-hung-7': [0, 2, 3, 6, 7, 8, 11],
  'penta': [0, 2, 4, 7, 9],
  'major-3': [0, 4, 7],
  'major-3+': [0, 4, 8],
  'minor-3': [0, 3, 7],
  'minor-3-': [0, 3, 6],
};

const update = () => {
  while (steps.childElementCount > length) {
    steps.lastElementChild.remove();
  }

  while (steps.childElementCount < length) {
    const input = document.createElement('input');
    input.type = 'checkbox';
    steps.append(input);
  }

  Array.from(steps.children).forEach((toggle, i) => {
    toggle.checked = pattern.includes(i);
  });

  updatePreset();
};

const updatePreset = () => {
  const presetName = Object.keys(PRESETS).find(k => PRESETS[k].join(',') === pattern.join(','));
  preset.value = presetName ?? 'custom';
};

patternLength.onchange = () => {
  length = +patternLength.value;
  if (!length || length < 4) length = 4;
  pattern = pattern.filter(n => n < length);
  update();
};

steps.onchange = () => {
  pattern = [];
  Array.from(steps.children).forEach((toggle, i) => {
    if (toggle.checked) pattern.push(i);
  });
  updatePreset();
};

preset.onchange = (e) => {
  const nextPattern = PRESETS[preset.value];
  if (nextPattern) {
    pattern = nextPattern.slice();
    update();
  }
};
preset.value = 'major-7';
preset.onchange();

export const getLength = () => length;
export const getSteps = () => pattern;